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”,如下:

刷新path

cmd 輸入 echo %PATH% 

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 就是顯示第一層級和第二層級的模塊,依次類推。
// 查看配置文件
npm config list

 vue 命令

// 創建項目
vue create tingshu

 // 運行項目

 npm run serve

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章