1. 程式人生 > 實用技巧 >VUE 專案搭建

VUE 專案搭建

安裝 node 環境

配置npm在安裝全域性模組時的路徑和快取cache的路徑

因為在執行例如npm install webpack -g等命令全域性安裝的時候,預設會將模組安裝在C:\Users\使用者名稱\AppData\Roaming路徑下的npm和npm_cache中,不方便管理且佔用C盤空間,

所以這裡配置自定義的全域性模組安裝目錄,在node.js安裝目錄下新建兩個資料夾 node_global和node_cache,如圖所示:

然後在cmd命令下執行如下兩個命令:

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

執行命令,如下圖所示:

執行完後,配置環境變數,如下:

  • “環境變數” -> “系統變數”:新建一個變數名為 “NODE_PATH”, 值為“D:\Program Files\nodejs\node_global\node_modules”,如下圖:

  • “環境變數” -> “使用者變數”:編輯使用者變數裡的Path,將相應npm的路徑(“C:\Users\使用者名稱\AppData\Roaming\npm”)改為:“D:\Program Files\nodejs\node_global
    ”,如下:

npm 常用命令

// 切換映象
npm config set registry http://registry.npm.taobao.org 
// 檢視映象
npm config get registry
//安裝 vue/cli
npm install -g @vue/cli
// 檢視全域性模組
npm list -g //使用這條指令不僅會打印出全域性安裝的模組,還會顯示全域性安裝的路徑。以及這些模組的依賴模組也一併打印出來,結果就是一個很長很長的樹級顯示
//檢視本地模組,良好的操作習慣是在安裝模組時使用 --save 將安裝了哪些模組都記錄在 package.json 中,這樣如果要查詢可以直接去 package.json 中檢視即可。
npm list --depth=0 // --depth=0 表示查詢模組,只顯示第一層級的模組。這裡的 0 如果換成 1 就是顯示第一層級和第二層級的模組,依次類推。