內(nèi)容來源基于vue-cli快速構(gòu)建，感謝玄木大神（僅個人記錄用）
Vue是什么，是一套構(gòu)建用戶界面的漸進(jìn)式框架
Vue兩大核心思想，組件化和數(shù)據(jù)驅(qū)動
Vue-cli是快速構(gòu)建這個單頁應(yīng)用的腳手架
1.使用npm全局安裝vue-cli（前提是你已經(jīng)安裝了nodejs，否則你連npm都用不了），在cmd中輸入一下命令
npm install --global vue-cli
同時在C:\Users\Andminster\AppData\Roaming\npm目錄下為會生成幾個文件
安裝完成后，創(chuàng)建自己的工作空間
使用命令創(chuàng)建項目
vue init webpack vuetest
命令輸入后，會進(jìn)入安裝階段，需要用戶輸入一些信息
已經(jīng)說明vue-cli創(chuàng)建了vuetest，接下來要做的命令已經(jīng)給出，那就按照提示來，先看一下，項目的目錄
bulid? 里面是一些操作文件，使用npm run *? ? 時其實執(zhí)行的就是這里的文件
config 配置文件，執(zhí)行文件需要的配置信息
src? 資源文件，所有的組件以及所用的圖片都是在這個放著的簡單看一下這個文件夾下都放了那些東西
assets? 資源文件夾，放圖片之類的資源，components? 組件文件夾，寫的所有組件都放在這個文件夾下，現(xiàn)在有一個寫好的組件已經(jīng)放到里面了，router? 路由文件夾，這個決定了也面的跳轉(zhuǎn)規(guī)則，App.vue應(yīng)用組件，所有自己寫的組件，都是在這個組件之上運行了，main.js? ? webpack入口文件，webpack四大特性entry入口、output輸出，loader加載器，plugins插件，可以再項目中build\webpack.base.conf.js第12行看到這個入口文件是哪個。
切換到項目目錄
npm install
安裝完成后，目錄中會多出來一個node_modules文件夾，這里放的就是所有依賴的模
項目構(gòu)建完成，現(xiàn)在我們輸入
npm run dev
執(zhí)行npm run dev命令，程序會先找到根目錄下的package.json文件，找到文件中的scripts項，找到對應(yīng)的dev命令，執(zhí)行dev對應(yīng)的命令，這里我們也可以不用npm run dev 直接輸入dev后面的命令效果是一樣的。
執(zhí)行dev命令，按照dev命令中的路徑找到對應(yīng)的build下dev-server.js文件，之后按照腳本的程序執(zhí)行。
下面來大概屢一下程序的執(zhí)行流程
執(zhí)行npm run dev命令，程序會先找到根目錄下的package.json文件，找到文件中的scripts項，找到對應(yīng)的dev命令，執(zhí)行dev對應(yīng)的命令，這里我們也可以不用npm run dev 直接輸入dev后面的命令效果是一樣的，這樣做的目的是因為有時命令會很長有很難記住，這種方式會非常的方便，具體只用可以參考阮一峰老師的npm script使用指南
執(zhí)行dev命令，按照dev命令中的路徑找到對應(yīng)的build下dev-server.js文件，之后按照腳本的程序執(zhí)行，首先引入版本檢測文件check-versions，使用的機(jī)制可學(xué)習(xí)一下阮一峰老師的require() 源碼解讀 ，接下來引入配置文件，process.env.NODE_ENV獲取環(huán)境變量，也就是判斷當(dāng)前運行的是測試環(huán)視開發(fā)環(huán)境，可是使用console.log(process.env.NODE_ENV)將獲取到的值打印到cmd中，可以看到是值是config\dev.env.js第五行定義的值“development”，很顯然是開發(fā)模式，接下來就是引入一些模塊，在第13行中，根據(jù)環(huán)境變量來判斷我們要引入哪個執(zhí)行文件，顯然是當(dāng)前目錄下的webpack.dev.conf文件，先不看這個文件，下來是端口號，這個比較關(guān)心一些，畢竟端口號不能一直是8080端口吧，要經(jīng)常修改這個端口號的。端口號又是判斷的，并且也用到了換將變量了，這一次我門將process.env、process.env.PORT、config.dev.port都打印出來，看看里面都什么，（這里要說明一下，當(dāng)我們直接將打印代碼寫到獲取端口號下面是，剛運行時有，自動打開頁面時被刷新了，還沒來得及看呢，不過仔細(xì)一點，就會發(fā)現(xiàn)它自己也打印了一句話“Listening at http://localhost:8080”，我在文件中71行找到了打印這句話的代碼，好的，那我就把打印寫到這了），看看輸出什么呢，內(nèi)容相當(dāng)?shù)亩?，我就不貼代碼了，主要看一下，判斷的兩個端口號是多少
process.env.PORT >>> undefined
config.dev.port >>> 8080
很顯然，當(dāng)前所用的端口號是配置文件中的端口號了，但是看一下配置文件中，并沒有dev或dev.port文件啊，可一下將config中的所有文件都看一遍，看哪里有8080的代碼，文件不多，代碼不成，很快就能找見的。很快就在index.js文件下找到了，原來這塊的dev只的并不是文件，而是index.js中的dev對象，并且port取得是的dev對象中port的值，端口號就在這里修改，這里牽扯的內(nèi)容較多，就不多說了（這里說個小技巧，當(dāng)找不見某個變量時，優(yōu)先從index、main之類頻繁使用字樣的文件中查找，因為這是一種習(xí)慣吧）。好了，這個文件的內(nèi)容較多，不全部說了，看一下注釋大概知道是什么意思，后續(xù)另寫篇博客對這些文件和代碼統(tǒng)一說明。
下面簡單看一下webpack.dev.conf文件，主要看到var baseConfig = require('./webpack.base.conf')，除了webpack.base.conf本身以外，其余三個webpack配置文件都引入了這個文件，從字面就可以看出，這是webpack的基礎(chǔ)配置，這些文件就不過多說明了。
接下來就看一下webpack.base.conf文件，這是核心文件，必須執(zhí)行的文件，這里可以看到entry和output，這就是入口和輸出路徑，在入口處看到了./src/main.js，這就找到了界面的入口處了。
在main.js中可以看到創(chuàng)建了一個vue實例，并加載了模板組件App.vue，在再App.vue組件中看到模板加入來了一個圖片和一個自定義的router-view標(biāo)簽，這個標(biāo)簽是在vue-router模塊中定義的，因為在main.js創(chuàng)建vue實例時已經(jīng)添加了router，這里可以直接使用，router-view標(biāo)簽里的內(nèi)容可以通過src\router\index.js中查看，在第三行看到import Hello from 'components/Hello'，引入了components下的Hello文件，并且在routes使用到了這個組件，這就是router-view標(biāo)簽加載（渲染）的內(nèi)容，在Hello.vue文件中看到了瀏覽器顯示的出logo一外的算有元素，界面上顯示的所有內(nèi)容都找到了，在通過output輸出到界面上整個過程就執(zhí)行完了。
在說一下打包，因為不可能將這個項目就這樣部署上去，需要將頁面打包，打包命令為
npm run build
打包完成后，會在根目錄下生成一個dist文件夾，這就是最后的成品頁面，在打包好的最底下為們會看到一個黃色的警告
它提示提示：建立文件是放在一個HTTP服務(wù)器。打開index.html文件：/ /不工作。當(dāng)直接使用瀏覽器打開文件時，瀏覽器控制臺會報錯
很多資源都加載失敗，仔細(xì)看一下路徑，絕對路徑，F(xiàn)盤下哪有static文件夾，那就要將打包的路徑改為相對路徑，這個根據(jù)build命令一路跟蹤，到config\index.js文件中的build對象，將assetsPublicPath中的“/”，改為“./”即可，就在前面加個點就可以了，并在build\build.js將這兩句的提示信息刪掉或注釋掉，再打包直接用瀏覽器直接運行就好了。
index.html就是單頁應(yīng)用的頁面，static文件夾下的兩個文件夾是什么，都知道，就不多說。這里的文件名和文件路徑都是可以通過配置文件修改的，具體可以按照命令的執(zhí)行看一下。
另外注意下，在進(jìn)行頁面調(diào)試時，請用Chrome瀏覽器，因為要使用到vue-tool擴(kuò)展程序，這個擴(kuò)展程序，自己去谷歌商店下載，這個絕對要科學(xué)上網(wǎng)的。打開之后可以看到
右上角有個vue小logo，表示我們已經(jīng)安裝vue-tool擴(kuò)展工具，并且啟用了，F(xiàn)12打開調(diào)試工具，會多一個Vue選項，沒有看到的話點擊最后面的“>>”按鈕，就可以看到所有的功能了，要是還是沒有，就重啟一下瀏覽器。在這里看到組件的層級結(jié)構(gòu)。
