1. 下載和安裝Node.js
Node.js官方中文網站:https://nodejs.org/zh-cn/
一定要下載正式版,穩定。
一路next到安裝目錄,自定義安裝目錄(不建議放在C盤)無需和圖一樣。
默認選擇全部,不用管。
編譯工具,應該是用不到,不用勾選了,安裝起來特別費時間,而且國內的網可能會導致下載失敗。
直接一路Next到安裝完畢即可。
在命令提示符中輸入 node -v 和 npm -v 查看安裝是否成功。
2. npm配置環境
① 打開Node.js安裝目錄,在安裝目錄中創建 node_global 和 node_cache 文件夾作為模塊存放處和緩存。
② 設置模塊存放文件夾和緩存文件夾。
// 設置緩存路徑
npm config set cache "C:\Java\nodejs\node_cache"
// 設置模塊存放路徑
npm config set prefix "C:\Java\nodejs\node_global"
③ 由於npm會默認使用外國服務器的鏡像,需要設置為國內鏡像,使用的是淘寶鏡像。
// 配置鏡像站
npm config set registry=http://registry.npm.taobao.org // 檢查鏡像站是否正常
npm config get registry
由於很多人會遇到"Current existing ChromeDriver binary is unavailable"這個錯誤,防患於未然,添加一條鏡像配置。
npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver
// 這里提供另一種方法,使用npm的管理工具nrm,可以便捷切換npm源 // 安裝nrm工具,代理映射庫
npm install nrm -g // 查看可以使用的源
nrm ls
// 使用淘寶提供的源
nrm use taobao // 再次查詢,開頭有*標識的是正在使用的源
nrm ls
注意:這兩個操作會在用戶目錄(C:\Users\用戶名)下產生兩個文件,分別是 .npmrc 和 .nrmrc ,千萬不要手滑刪除,否則就得重新配置!
④ 安裝cnpm,因為上面已經修改了默認鏡像站,所以無需手動指向鏡像站。
下面的命令都使用cnpm代替npm,如果cnpm無法執行,則繼續使用npm命令。
npm install -g cnpm
⑤ 配置環境變量,一定要以自己安裝的路徑配置!!!
// 在系統變量中 Path 條目新增路徑,不要遺漏分號,否則會出錯
C:\Java\nodejs\node_global // 新增系統變量 NODE_PATH // 設置系統變量 NODE_PATH 路徑
C:\Java\nodejs\node_modules
⑥ 重新打開命令提示符窗口,安裝Vue-cli腳手架。執行完了第一條就執行第二條。
cnpm install @vue/cli -g cnpm install @vue/cli-init -g // 只要沒有ERROR錯誤就是安裝成功 // 檢查Vue是否安裝成功
vue --version
⑦ 下載webpack庫。
因為構建項目需要很多的資源,而Node並沒有自帶數據包,需要手動下載完整的數據包,這樣創建項目的時候就不需要重復訪問遠端資源庫。
因為模板庫也可能有更新,所以許久不創建新項目的,在創建新項目之前運行一下此命令比較好。
npm install webpack -g
npm install webpack-cli -g
3. 命令行新建和打包項目
如果使用IDE,則無需以下操作,但是強烈建議看看第四節。
① 因為創建項目命令會在當前工作路徑創建項目,所以需要將工作路徑跳轉到創建項目的路徑。
// 假設目標路徑 C:\Java\workspace_ElementUI
cd C:\Java\workspace_ElementUI // 創建項目,first_project是可以自定義的項目名
vue init webpack first_project
創建過程中會提示需要輸入信息,如果沒有特殊要求,一直按Enter鍵即可。
然后就是等待,只要沒有紅色的ERR錯誤警告基本沒問題。
② 啟動項目,前提是需要在項目目錄下操作。
cnpm run dev
這里提示訪問 http://localhost:8080 即可打開主頁。
在命令提示符中按 Ctrl + C 即可停止項目。
③ 安裝Vue-Router。
cnpm install vue-router --save
④ 安裝Vuex。
cnpm install vuex --save
⑤ 打包,需要在項目路徑內執行。
首先需要將項目目錄下的config文件夾中的index.js文件編輯。
將 build 下的 assetsPublicPath:'/' 修改為 assetsPublicPath:'./' 然后執行打包命令。
cnpm run build
打包成功以后,在項目目錄中會生成一個名為dist文件夾,打包好的項目就存放在這個文件夾里面。
⑥ 清理Node緩存。
創建和刪除項目都會在Node的cache緩存中產生垃圾,所以每次刪除項目后,都需要執行一次緩存清理操作。
npm cache clear --force
4. 注意事項
① 一定不要隨便清理 C:\Users\用戶名\AppData\Local\Temp 這個目錄,否則可能會導致無法創建、運行項目。
② 如果創建項目的 download template 時間過長,可以試着用回車鍵"刺激"一下。如果還不行,請檢查源,並清理Node緩存。
③ 如果創建速度過於緩慢,嘗試着將命令行窗口調整為最大化。如果有興趣研究,可以看一下我這篇文章:https://www.cnblogs.com/NyanKoSenSei/p/12323862.html
④ 強烈推薦全程使用非管理員模式下的命令提示符。
⑤ 遇到卡頓緩慢問題,多嘗試重啟命令提示符。