最近在學@vue/cli 3.x API,升級vue-cli3.0最新版本的時候遇到很多坑,繞了很多彎。查了很多資料,最終解決。記錄一下遇到的問題,以防以後再次發生。
1.升級@vue/cli 3.x 需要安裝node.js最新版本。卸載重新安裝。我這裏安裝的是node.js10.15.1
卸載了vue-cli2.X版本
npm uninstall vue-cli -g //卸載vue-cli舊版本
安裝
npm install -g @vue/cli
一直安裝失敗。在命令窗口vue+回車後發現沒安裝上。
嘗試執行npm install -g vue-cli安裝舊版本也安裝失敗。估計跟版本升級有關。
於是重新安裝淘寶npm鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
以爲這下可以了吧~~
然而再次安裝@vue/cli依舊失敗。。。。。
百度下原因可能是安裝路徑出現錯誤。
鏈接:vue-cli3.0升級失敗,vue-cli卸載不掉,vue-cli升級不了3.0
2. 修改安裝路徑
默認裝在C:\Users\Administrator\AppData\Roaming\npm
因爲node.js安裝在D盤,修改全局安裝路徑。
打開“計算機” 》 “高級系統設置” 》 “環境變量” 》“path” 修改路徑
D:nodejs\node_global
3.設置npm默認安裝路徑
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”
重新安裝@vue/cli 3.x ,阿西吧,又失敗了(n遍失敗)。
然鵝,我一直忽略一個問題 !!!
輸入cnpm -v 報cnpm不是內部命令也不是外部命令
輸入vue+回車 不是內部命令
解決方法:
- 找到npm目錄,放置在D:\nodejs\node_global下面,我是選擇安裝在這。
- 再找到cnpm目錄,同樣D:\nodejs\node_global下面,把cnpm和npm放在一個目錄*
- 返回上一級D:\node\node_global 裏面有npm和npm.cmd
- 搜索cnpm.cmd 把cnpm和cnpm.cmd放在D:\node\node_global裏
4.重新安裝 vue
npm install vue
太慢請安裝cnpm install vue
5.安裝vue-cli
直接安裝最新的包
npm install -g @vue/cli
用 vue --version這個命令來檢查其版本是否正確 (3.x):
終於安裝成功!!!!
(๑╹◡╹)ノ"""彩蛋:
安裝後創建一個項目
vue create hello-world
選擇 “default (babel, eslint)” 默認的設置,非常適合快速創建一個新項目的原型。
然後
cd hello-world
npm run serve
運行效果如下:
可以通過 vue ui 命令以圖形化界面創建和管理項目:
vue ui