小白學習Vue(11)--環境安裝及專案構建 | webstorm構建vue專案

11. 環境安裝及專案構建：

vue專案快速構建需要腳手架（vue-cli）的支援，類似web專案可以通過maven快速構建；vue專案構建需要Node.js環境的支援

 11.1. node.js下載安裝：

 從Node.js官網下載對應電腦位數的Windows 安裝包 (.msi)，然後開啟一直Next即可完成安裝

 【安裝成功檢查】：

 在cmd中分別輸入node -v、npm -v 顯示對應的版本號

 11.2. npm修改全域性下載和快取路徑(可選)：

 正常安裝Node.js後，當npm依賴包下載時，會下載到C盤（C:\Users\Mr.zhong\AppData\Roaming\npm），這會佔據C盤空間

 【修改】：cmd執行以下命令

 npm config set prefix “D:\nodeVueFile\npm_global”
 npm config set cache “D:\nodeVueFile\npm_cache”
 npm config set registry=http://registry.npm.taobao.org

 // 設定registry淘寶的npm映象庫下載會快點
 // 注意修改的路徑儘量不能有空格，不然webstorm新建專案會報錯

 本處修改到自定義的npm_global、npm_cache目錄，修改後可在‪C:\Users\Mr.zhong.npmrc檔案看到設定的變化

 11.3. vue-cli相關外掛下載：

  11.3.1. vue.js安裝：

 cmd執行：npm install vue -g

  11.3.2. vue-cli安裝：

 cmd執行：npm install vue-cli -g

  11.3.3. 設定vue環境變數：

 安裝vue-cli後在globa目錄（此處為上述修改後的目錄）會有vue.cmd，將該目錄新增到環境變數path即可

 設定好環境變數，在cmd輸入vue -V 顯示版本號即設定正確，注意後面的是大寫的V

 11.4. 專案構建：

 cmd跳轉到欲建專案的目錄（在該目錄位址列輸入cmd即可），然後執行 vue init webpack 專案名稱

vue-route按需設定，回車即可，後面的幾個選項一般都選no

 11.5. 專案啟動：

 構建完，上圖黃色字型提示很清楚如何啟動，
  cmd進入vue專案目錄
  執行vue install命令
  執行npm run dev命令

 上述顯示則啟動成功，訪問http://localhost:8080即可瀏覽demo

 11.6. webstorm構建vue專案：

 webstorm畢竟針對前端，前端開發還是挺方便的，不像idea那麼重量級，也可以與idea進行前後端聯調

 軟體下載安裝啟用就不說了，你懂的，webstorm構建vue專案如下即可，會自動構建

 如果構建報錯：Could not install from "Files… …，檢查一下全域性路徑是否有空格，不能有空格的