搭建vue-cli項目

作為一個喜歡動手的人，在理論有一定了解的情況下，我選擇通過實踐來讓我記住之前看過的理論，因為我看完就忘

1.安裝node.js及npm

npm官網地址

下載node，安裝很簡單一直下一步就可以了。

win+R 輸入cmd進入命令行 輸入

node -v
npm -v

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

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

使用vue-cli要求：

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

2）建議用一個能使用node命令行的終端，我推薦用Git，安裝簡單

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

     因為之前看到不少人搭建都用linux命令，搞得我很懵逼，linux上面搭建？？？后來看了一個視頻才知道還有這種操作。。。

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

#安裝vue-cli
npm install vue-cli -g
#進入你要放文件的目錄，下載vue-cli模板
vue init webpack my-project
#會跳出幾個選項讓你回答
#反正我安裝的時候啥都不知道一股腦回車+y，后來才知道。。。
Project name (my-project)： -----項目名稱，直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫 ，可以參考一下。
Project description (A Vue.js project)： ----項目描述，也可直接點擊回車，使用默認名字
Author ()： ----作者，輸入你的大名
接下來會讓用戶選擇：
Runtime + Compiler: recommended for most users 運行加編譯，既然已經說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，已經有推薦了就選擇第一個了
Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數(shù)情況下都使用，這里就輸入“y”后回車即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統(tǒng)一代碼風格的，一般項目中都會使用。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車
#下載項目依賴
npm install
#下載完就可以啟動了
#在localhost啟動測試服服務器
npm run dev
#生成上線目錄（部署）
npm run build

下面是安裝后的目錄結構

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

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

PS：看了別人的帖子說，在進行vue頁面調試時，一定要去谷歌商店下載一個vue-tool擴展程序。

前端知識擴展：

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

const一般用于聲明常量

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

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