Vue環境搭建&Vue-cli腳手架3.0前後版本切換方法
Vue環境搭建
步驟概括:
(1) 下載安裝node.js
(2) 設定node的全域性和快取路徑
(3) 安裝淘寶映象
(4) 設定環境變數
(5) 安裝Vue
(6) 安裝Vue-cli腳手架
(7) 建立一個Vue專案
附:
Vue-cli腳手架3.0前後版本切換方法
1、下載安裝node.js
下載地址:
中文網(下載快,推薦使用):http://nodejs.cn/download/
可點選阿里雲映象
https://npm.taobao.org/mirrors/node/v14.15.4/
可在該地址後面修改想要下載的版本號,然後選擇32或64位的.msi檔案下載:
下載後安裝:
修改安裝位置:
按照預設即可,
繼續下一步,不用勾選:
2、設定node的全域性和快取路徑
在node.js的安裝路徑下,新建node_global和node_cache兩個資料夾
按Win+R,進入cmd控制檯:
設定快取路徑(路徑為快取資料夾的路徑):
npm config set cache "E:\InstallationPosition\work\nodejs\node_cache"
設定全域性模組的存放路徑:
npm config set prefix "E:\InstallationPosition\work\nodejs\node_global"
設定成功後,以後要安裝XXX模組,用命令npm install XXX -g,就會放在全域性模組的路徑裡
3、安裝淘寶映象(基於 Node.js 安裝cnpm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成
4、設定環境變數
設定環境變數的目的是在任何目錄都可以執行node和vue命令。
(1)新增Path路徑(全域性資料夾路徑)“E:\InstallationPosition\work\nodejs\node_global”
進入環境變數介面,雙擊下面的Path,
點選新建,將全域性資料夾的路徑複製進來,點選確定:
(2)新增系統變數NODE_PATH
5、安裝Vue
一定要確定將上面的設定環境變數的視窗點選確定並關閉,並且需要先關上命令列視窗,再次開啟cmd,執行下面的安裝Vue命令,才可正常執行:
cnpm install vue -g (此處使用的是上面安裝的淘寶映象cnpm命令)
6、安裝Vue-cli腳手架
7、建立一個Vue專案
自己在某個位置新建一個資料夾,用來存放vue專案:
例如:
關閉命令列視窗再次開啟,進入到剛才新建資料夾的路徑下:
在當前目錄下輸入“vue init webpack-simple 專案名稱(使用英文)”。
注意專案名不能包含大寫字母:
cd test
npm install
執行:
cnpm run dev
===========================================================================
Vue-cli腳手架3.0前後版本切換方法:
(一)3.0以下--->3.0以上
(1) 先解除安裝vue3.0之前的
npm uninstall -g vue-cli
當前版本:
解除安裝:
(2) 安裝3.0之後的
npm install -g @vue/cli
(3) 安裝中若出錯執行下面的三個命令進行更新
npm i npm -g 更新npm
npm i @vue/cli -g 更新3.0之後的版本
cnpm i @vue/cli -g 更新淘寶映象的版本
即可。
升級之後:
(二)3.0以上--->3.0以下
即uninstall和install的兩個內容互換。