在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項目的文件結構內容。