在2019年我就通過vs code開發過多個前后端分離的vue專案，之前一直沒總結把開發歷程記錄下來，最近從零開始重新折騰一遍，也遇到不少坑，記錄一下，
一、VS Code 安裝及配置
vscode的安裝就太簡單了，略過，安裝好后，配置一下中文，輸入chinese，選第一個簡體如圖
二、Node，Npm安裝及配置
到Node官網下載最新版的安裝包，https://npm.taobao.org/mirrors/node/v14.16.0/node-v14.16.0-x64.msi，使用國內鏡像會快很多，具體安裝步驟就不細說了，Node安裝包會自帶Npm的，
安裝完后，在 cmd中確認一下是否成功，如果查詢版本號正常回傳說明node跟npm都已安裝好
這里我們可以更改node.js默認下載依賴的位置，在自己安裝的node.js檔案夾中新建一個node_cache和node_global檔案夾，接下來在cmd分別中輸入：
npm config set prefix "F:\program\nodejs\node_global"
npm config set cache "F:\program\nodejs\node_cache"
更改好了目錄，可以去檔案夾下面看一下是否創建成功，node_global會及時創建，node_cache是在下載檔案之后才會創建的，
由于npm官方地址下載包一般很慢，繼續使用以下cmd命令更換為淘寶鏡像源，
npm set registry https://registry.npm.taobao.org
三、Vue，Vue-cli ，Webpack安裝
在vs code終端中執行：npm install -g vue-cli，出現如下界面表示vue安裝完成，
如果提示：npm: 無法將“npm ”項識別為 cmdlet、函式、腳本檔案或可運行程式的名稱，請檢查名稱的拼寫，如果包括路徑，請確保路徑正確，然后再試一次，否則表示未安裝node.js，請重新安裝node.js即可，
如果設定了npm的全域路徑為F:\program\nodejs\node_global，則vue會安裝到此位置，此時一定要把該路徑配置到環境變數Path中，在我的電腦屬性中點開以下標紅處編輯，
如上圖所示，因為我已經安裝了webpack，所以上圖中也有webpack的路徑，再輸入 npm install vue-cli -g 安裝vue-cli，-g表示全域安裝，webpack的安裝繼續在cmd中輸入 npm install -D webpack-cli 即可，到此所需要的環境 已經全部安裝完成了，下面來創建一個vue專案，
四、創建Vue 專案
在vs code中打開一個空的檔案夾，然后在“終端”中輸入：vue init webpack vue_demo，其中vue_demo可以自行修改， 如果此時出現如下提示：
無法加載檔案 F:\program\nodejs\node_global\node_global\vue.ps1，因為在此系統上禁止運行腳本，解決這個問題只需要在cmd中輸入以下命令 set-ExecutionPolicy RemoteSigned 解決：
至此，還可能會因為網路問題無法下載vue tample的問題，最近github被墻的很厲害，這里推薦一種免費的范強方式，github 搜索 xx-net，具體使用方法有詳細的檔案，我最后是通過配置好xx-net，才把vue專案創建成功的，不然 很多包會下載超時導致很多奇怪的問題，
最后專案創建成功后的vs code界面是這樣的，目錄上很多檔案不知道啥意思不用緊張，下篇會詳細講解：
如果vue檔案沒有彩色提示，全是黑的，還需要再安裝Vetur插件：
順便把Debugger for Chrome也裝一下，后面除錯的時候有用，在終端輸入：npm run dev 啟動起來，如果專案啟動了沒自動打開瀏覽器，只要在專案根目錄下找到package.json，然后打開該檔案，在檔案中的script腳本命令的dev行加入–open就可以了，如圖所示：
看到下圖，到此，全部安裝程序完成了，
下一篇繼續講解vue專案的檔案結構內容，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/270456.html
標籤：ASP.NET MVC