近日，有項(xiàng)目前端用到vue.js，之前沒接觸過，加班加點(diǎn)趕進(jìn)度，初窺門徑，把這個(gè)過程及經(jīng)驗(yàn)記錄下來，免得忘了。
一、環(huán)境搭建
（一）安裝node.js
Win7支持的 NodeJs 最高版本為 13.14.0，下載地址：https://nodejs.org/zh-cn/download/releases/
NODEJS版本下載.png
（二）node.js相關(guān)配置
1.nodejs文件夾下新建 node_cache （緩存）和 node_global （全局文件夾）。
2.配置 nodejs環(huán)境變量
a.用戶變量：修改PATH為 C:\Program Files\nodejs\node_global（可不設(shè)）
b.系統(tǒng)變量：新建NODE_PATH 為:G:\nodejs\node_global\node_modules
c.系統(tǒng)變量：修改Path，在原路徑后面修改為:
‘;% NODE_PATH%\ node_modules;D:\nodejs;’
3.cmd執(zhí)行命令：
npm config set cache " D:\nodejs\node_cache "
npm config set prefix " D:\nodejs\node_global "
4.更換淘寶鏡像
npm config set registry=https://registry.npm.taobao.org
查看鏡像
npm config get registry
（三）安裝vue腳手架
1.vue2
npm install vue -g
npm install vue-cli –g
默認(rèn)安裝2.9.6版本
2.vue3
npm install vue -g
npm install -g @vue/cli
3.查看版本
查看vue版本
vue -V
（四）新建VUE項(xiàng)目
打開webstorm后，文件》新建 項(xiàng)目，然后出現(xiàn)下面的圖片：
webstorm搭建vue.png
設(shè)置運(yùn)行參數(shù)：
webstorm運(yùn)行vue.png
運(yùn)行成功：
webstorm運(yùn)行vue成功.png
注意，在新建項(xiàng)目的時(shí)候容易出現(xiàn)下面這個(gè)錯(cuò)誤：
“You are using Node v10.16.0, but this version of @vue/cli requires Node ^12.0.0 || ＞= 14.0.0”
解決方法：
1、執(zhí)行卸載命令刪除當(dāng)前的腳手架版本：
已知安裝版本：npm install -g @vue/cli@版本號(hào)
未知安裝版本：npm uninstall -g @vue/cli
2.刪除node v10版本，重新安裝node v12版本，下載地址：https://nodejs.org/zh-cn/download/releases/
3.執(zhí)行如下命令安裝低版本的腳手架：npm install vue-cli -g，默認(rèn)安裝2.9.6版本
4.在cmd中執(zhí)行：vue -V 命令；
vue命令查看版本.png
5.再次新建vue項(xiàng)目。
（五）vue-cli新建vue項(xiàng)目
1.新建文件夾myfirst，進(jìn)入文件夾，輸入 vue init webpack vue-cli-test，其中vue-cli-test為新項(xiàng)目文件名
2.跳入選擇項(xiàng)來進(jìn)行項(xiàng)目信息填寫與確認(rèn)
a.Project name (baoge)： -----項(xiàng)目名稱，直接回車，按照括號(hào)中默認(rèn)名字（注意這里的名字不能有大寫字母，如果有會(huì)報(bào)錯(cuò)Sorry, name can no longer contain capital letters）
b.Project description (A Vue.js project)： ----項(xiàng)目描述，也可直接點(diǎn)擊回車，使用默認(rèn)名字
c.Author ()： ----作者
d.接下來會(huì)讓用戶選擇：
Runtime + Compiler: recommended for most users** **運(yùn)行加編譯，既然已經(jīng)說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere僅運(yùn)行時(shí)，已經(jīng)有推薦了就選擇第一個(gè)了
Install vue-router? (Y/n)是否安裝vue-router，這是官方的路由，大多數(shù)情況下都使用，這里就輸入“y”后回車即可。
Use ESLint to lint your code? (Y/n)是否使用ESLint管理代碼，ESLint是個(gè)代碼風(fēng)格管理工具，是用來統(tǒng)一代碼風(fēng)格的，一般項(xiàng)目中都會(huì)使用。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個(gè)ESLint預(yù)設(shè)，編寫vue項(xiàng)目時(shí)的代碼風(fēng)格，直接y回車
Setup unit tests with Karma + Mocha? (Y/n)是否安裝單元測(cè)試，選擇安裝y回車
Setup e2e tests with Nightwatch(Y/n)?是否安裝e2e測(cè)試 ，選擇安裝y回車
cli安裝vue.png
- 配置完成之后，myfirst目錄下面多了一個(gè)vue-cli-test的文件夾，會(huì)自動(dòng)下載依賴包；
-
輸入 npm run dev 啟動(dòng)項(xiàng)目，成功后輸入訪問地址，顯示如下界面:
輸入npm命令運(yùn)行vue.png
