Windows安裝Nodejs和npm以及創建項目


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

  ④ 強烈推薦全程使用非管理員模式下的命令提示符。

  ⑤ 遇到卡頓緩慢問題,多嘗試重啟命令提示符。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM