搭建vue-cli項(xiàng)目

作為一個(gè)喜歡動(dòng)手的人，在理論有一定了解的情況下，我選擇通過(guò)實(shí)踐來(lái)讓我記住之前看過(guò)的理論，因?yàn)槲铱赐昃屯?/p>

1.安裝node.js及npm

npm官網(wǎng)地址

下載node，安裝很簡(jiǎn)單一直下一步就可以了。

win+R 輸入cmd進(jìn)入命令行輸入

node -v
npm -v

出現(xiàn)以上信息說(shuō)明node.js及npm安裝成功

2.創(chuàng)建vue-cli項(xiàng)目

使用vue-cli要求：

1）node.js版本（>=4.X）

2）建議用一個(gè)能使用node命令行的終端，我推薦用Git，安裝簡(jiǎn)單

安裝后運(yùn)行里面的git-bash.exe，然后就可以在windows用linux命令了

因?yàn)橹翱吹讲簧偃舜罱ǘ加胠inux命令，搞得我很懵逼，linux上面搭建？？？后來(lái)看了一個(gè)視頻才知道還有這種操作。。。

下面開(kāi)始創(chuàng)建vue-cli項(xiàng)目

#安裝vue-cli
npm install vue-cli -g
#進(jìn)入你要放文件的目錄，下載vue-cli模板
vue init webpack my-project
#會(huì)跳出幾個(gè)選項(xiàng)讓你回答
#反正我安裝的時(shí)候啥都不知道一股腦回車(chē)+y，后來(lái)才知道。。。
Project name (my-project)： -----項(xiàng)目名稱(chēng)，直接回車(chē)，按照括號(hào)中默認(rèn)名字（注意這里的名字不能有大寫(xiě)字母，如果有會(huì)報(bào)錯(cuò)Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫(xiě) ，可以參考一下。
Project description (A Vue.js project)： ----項(xiàng)目描述，也可直接點(diǎn)擊回車(chē)，使用默認(rèn)名字
Author ()： ----作者，輸入你的大名
接下來(lái)會(huì)讓用戶(hù)選擇：
Runtime + Compiler: recommended for most users 運(yùn)行加編譯，既然已經(jīng)說(shuō)了推薦，就選它了
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”后回車(chē)即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個(gè)代碼風(fēng)格管理工具，是用來(lái)統(tǒng)一代碼風(fēng)格的，一般項(xiàng)目中都會(huì)使用。
接下來(lái)也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個(gè)ESLint預(yù)設(shè)，編寫(xiě)vue項(xiàng)目時(shí)的代碼風(fēng)格，直接y回車(chē)
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測(cè)試，我選擇安裝y回車(chē)
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測(cè)試 ，我選擇安裝y回車(chē)
#下載項(xiàng)目依賴(lài)
npm install
#下載完就可以啟動(dòng)了
#在localhost啟動(dòng)測(cè)試服服務(wù)器
npm run dev
#生成上線目錄（部署）
npm run build