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

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

1.安裝node.js及npm

npm官網(wǎng)地址

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

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

node -v
npm -v

出現(xiàn)以上信息說明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上面搭建？？？后來看了一個(gè)視頻才知道還有這種操作。。。

下面開始創(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í)候啥都不知道一股腦回車+y，后來才知道。。。
Project name (my-project)： -----項(xiàng)目名稱，直接回車，按照括號(hào)中默認(rèn)名字（注意這里的名字不能有大寫字母，如果有會(huì)報(bào)錯(cuò)Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫 ，可以參考一下。
Project description (A Vue.js project)： ----項(xiàng)目描述，也可直接點(diǎn)擊回車，使用默認(rèn)名字
Author ()： ----作者，輸入你的大名
接下來會(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回車
#下載項(xiàng)目依賴
npm install
#下載完就可以啟動(dòng)了
#在localhost啟動(dòng)測(cè)試服服務(wù)器
npm run dev
#生成上線目錄（部署）
npm run build

下面是安裝后的目錄結(jié)構(gòu)

在config文件夾下的index.js是打包和部署的配置，這是dev的，下面還有個(gè)build的

package.json里面是一些基本信息，依賴，命令之類的配置

PS：看了別人的帖子說，在進(jìn)行vue頁(yè)面調(diào)試時(shí)，一定要去谷歌商店下載一個(gè)vue-tool擴(kuò)展程序。

前端知識(shí)擴(kuò)展：

1.var，let，const的區(qū)別：

const一般用于聲明常量

var在代碼塊里聲明后，代碼塊外面能拿到var聲明的值

let在代碼塊里聲明后，代碼塊外面拿不到let聲明的值