關於升級vue-cli3.0踩坑記錄

最近在學@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+回車 不是內部命令

解決方法:

  1. 找到npm目錄,放置在D:\nodejs\node_global下面,我是選擇安裝在這。
  2. 再找到cnpm目錄,同樣D:\nodejs\node_global下面,把cnpm和npm放在一個目錄*
  3. 返回上一級D:\node\node_global 裏面有npm和npm.cmd
  4. 搜索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

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