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的兩個內容互換。
參考鏈接:https://www.bilibili.com/video/BV1bv411v7ye/?p=2