Vue是近兩年來比較火的一個前端框架（漸進式框架吧），與reactjs和angularjs三國鼎立，我不是職業前端，做過Vue，瞭解了一下React，聽說過Angluar。我只能這麼說，我來晚了，沒經歷所有。閒話少說進入正題。
Vue是什麼，是一套構建用戶界面的漸進式框架（官網解釋），什麼叫漸進式框架呢，簡單回答就是主張最少，這些概念只能自己去看，自己去理解，一千個讀者一千個哈姆雷特，不過多的解釋。Vue官方文檔很全面的。
Vue兩大核心思想，組件化和數據驅動，組件化就是將一個整體合理拆分爲一個一個小塊（組件），組件可重複使用，數據驅動是前端的未來發展方向，釋放了對DOM的操作，讓DOM隨着數據的變化自然而然的變化（尤神原話），不必過多的關注DOM，只需要將數據組織好即可。
Vue-cli是快速構建這個單頁應用的腳手架，這個可是官方的。官方給的建議，如果你是初次嘗試Vue，哪就老老實實用普通的書寫引入js文件，這裏牽扯太多的東西，例如webpack 、npm 、nodejs 等等，很容易成就從入門到放棄的思想。這篇文章本身就是按照官方的文檔中的構建流程來的（官方構建建議）。以下是構建過程。
1、使用npm全局安裝vue-cli（前提是你已經安裝了nodejs，否則你連npm都用不了），在cmd中輸入一下命令
npm install --global vue-cli
安裝完成後
同時在C:\Users\Andminster\AppData\Roaming\npm目錄下爲會生成幾個文件
安裝完成後，創建自己的工作空間，在cmd切換至剛剛創建好的工作空間，如果已經有工作空間，直接切換到工作空間即可。使用命令創建項目
vue init webpack vuetest
vuetest是項目名稱，這個名字自己隨便取。
命令輸入後，會進入安裝階段，需要用戶輸入一些信息。
Project name (vuetest)
項目名稱，可以自己指定，也可直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，如果有會報錯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，這是官方的路由，大多數情況下都使用，不過我的第一個項目中的路由是自己寫的，沒有使用到官方路由，因爲有特殊需求，也因爲比較早，官方尚未成熟，vue-router官網 。這裏就輸入“Y”後回車即可。
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響整體的運行，這也是爲了多人協作，新手就不用了，一般項目中都會使用。ESLint官網
接下來也是選擇題Pick an ESLint preset (Use arrow keys)
選擇一個ESLint預設，編寫vue項目時的代碼風格，因爲我選擇了使用ESLint。
Standard (https://github.com/feross/standard)
標準，有些看不明白，什麼標準呢，去給提示的standardgithub地址看一下， 原來時js的標準風格。
AirBNB (https://github.com/airbnb/javascript)
JavaScript最合理的方法，這個github地址說的是JavaScript最合理的方法。
none (configure it yourself
這個不用說，自己定義風格。
具體選擇哪個因人而異吧，我選擇標準風格。
Setup unit tests with Karma + Mocha? (Y/n)
是否安裝單元測試，我選擇安裝。
Setup e2e tests with Nightwatch(Y/n)?
是否安裝e2e測試 ，我選擇安裝。
完成
已經說明vue-cli創建了vuetest，接下來要做的命令已經給出，那就按照提示來，先看一下，項目的目錄。
簡單說一下這個目錄，
bulid：裏面是一些操作文件，使用npm run * 時其實執行的就是這裏的文件。
config：配置文件，執行文件需要的配置信息。
src：資源文件，所有的組件以及所用的圖片都是在這個放着的簡單看一下這個文件夾下都放了那些東西。
assets：資源文件夾，放圖片之類的資源。
components：組件文件夾，寫的所有組件都放在這個文件夾下，現在有一個寫好的組件已經放到裏面了。
router：路由文件夾，這個決定了也面的跳轉規則。
App.vue：應用組件，所有自己寫的組件，都是在這個組件之上運行了。
main.js：webpack入口文件，webpack四大特性entry入口、output輸出，loader加載器，plugins插件，可以在項目中build\webpack.base.conf.js第12行看到這個入口文件是哪個。
切換到項目目錄
cd vuetest
安裝依賴模塊
npm install
這裏只用了install是安裝所有的模塊，如果是安裝具體的那個模塊install 後面輸入模塊的名字即可，只輸入install就按照項目的根目錄下的package.json文件中依賴的模塊安裝，這個文件裏面是不允許有任何註釋的，每個使用npm管理的項目都有這個文件，是npm操作的入口文件。因爲是初始項目，還沒有任何模塊，需要安裝所有的模塊，這就是爲什麼我們剛下載下來別人的項目時都需要先運行 npm install 命令，因爲模塊較多，文件比較大，所以沒有上傳模塊，這個不需要上傳那些文件的配置是在根目錄下.gitignore配置的，這是git操作的配置文件，涉及到的git操作都要操作這個文件，可以沒有，也可以什麼都不寫。這個安裝時間比較長，再加上npm是國外的服務器，就更慢了，也可以再開始之前就講npm切換到taobao鏡像上，就相對會快一些，這裏可以看一下阮一峯老師的 npm 模塊安裝機制簡介。
安裝完成後，目錄中會多出來一個node_modules文件夾，這裏放的就是所有依賴的模塊，如何將npm切換至cnpm。
這裏文件比較多，也比較大，現在就明白爲什麼大家都不上傳這個文件了。
項目構建完成，現在我們輸入npm run dev運行項目吧，看看有什麼效果。
自動打開默認瀏覽器顯示頁面。
下面來大概捋一下程序的執行流程。
執行npm run dev命令，程序會先找到根目錄下的package.json文件，找到文件中的scripts項，找到對應的dev命令，執行dev對應的命令，這裏我們也可以不用npm run dev 直接輸入dev後面的命令效果是一樣的，這樣做的目的是因爲有時命令會很長有很難記住，這種方式會非常的方便，具體只用可以參考阮一峯老師的npm script使用指南。
執行dev命令，按照dev命令中的路徑找到對應的build下dev-server.js文件，之後按照腳本的程序執行，首先引入版本檢測文件check-versions，使用的機制可學習一下阮一峯老師的 require() 源碼解讀，接下來引入配置文件，process.env.NODE_ENV獲取環境變量，也就是判斷當前運行的是測試環視開發環境，可是使用console.log(process.env.NODE_ENV)將獲取到的值打印到cmd中，可以看到是值是config\dev.env.js第五行定義的值“development”，很顯然是開發模式，接下來就是引入一些模塊，在第13行中，根據環境變量來判斷我們要引入哪個執行文件，顯然是當前目錄下的webpack.dev.conf文件，先不看這個文件，下來是端口號，這個比較關心一些，畢竟端口號不能一直是8080端口吧，要經常修改這個端口號的。端口號又是判斷的，並且也用到了換將變量了，這一次我門將process.env、process.env.PORT、config.dev.port都打印出來，看看裏面都什麼，（這裏要說明一下，當我們直接將打印代碼寫到獲取端口號下面是，剛運行時有，自動打開頁面時被刷新了，還沒來得及看呢，不過仔細一點，就會發現它自己也打印了一句話“Listening at http://localhost:8080”，我在文件中71行找到了打印這句話的代碼，好的，那我就把打印寫到這了），看看輸出什麼呢，內容相當的多，我就不貼代碼了，主要看一下，判斷的兩個端口號是多少
process.env.PORT >>> undefined
config.dev.port >>> 8080
很顯然，當前所用的端口號是配置文件中的端口號了，但是看一下配置文件中，並沒有dev或dev.port文件啊，可一下將config中的所有文件都看一遍，看哪裏有8080的代碼，文件不多，代碼不成，很快就能找見的。很快就在index.js文件下找到了，原來這塊的dev只的並不是文件，而是index.js中的dev對象，並且port取得是的dev對象中port的值，端口號就在這裏修改，這裏牽扯的內容較多，就不多說了（這裏說個小技巧，當找不見某個變量時，優先從index、main之類頻繁使用字樣的文件中查找，因爲這是一種習慣吧）。好了，這個文件的內容較多，不全部說了，看一下注釋大概知道是什麼意思，後續另寫篇博客對這些文件和代碼統一說明。
下面簡單看一下webpack.dev.conf文件，主要看到var baseConfig = require(‘./webpack.base.conf’)，除了webpack.base.conf本身以外，其餘三個webpack配置文件都引入了這個文件，從字面就可以看出，這是webpack的基礎配置，這些文件就不過多說明了。
接下來就看一下webpack.base.conf文件，這是核心文件，必須執行的文件，這裏可以看到entry和output，這就是入口和輸出路徑，在入口處看到了./src/main.js，這就找到了界面的入口處了。
在main.js中可以看到創建了一個vue實例，並加載了模板組件App.vue，在再App.vue組件中看到模板加入來了一個圖片和一個自定義的router-view標籤，這個標籤是在vue-router模塊中定義的，因爲在main.js創建vue實例時已經添加了router，這裏可以直接使用，router-view標籤裏的內容可以通過src\router\index.js中查看，在第三行看到import Hello from ‘components/Hello’，引入了components下的Hello文件，並且在routes使用到了這個組件，這就是router-view標籤加載（渲染）的內容，在Hello.vue文件中看到了瀏覽器顯示的出logo一外的算有元素，界面上顯示的所有內容都找到了，在通過output輸出到界面上整個過程就執行完了。
再說一下打包，因爲不可能將這個項目就這樣部署上去，需要將頁面打包，打包命令爲
npm run build
打包完成後，會在根目錄下生成一個dist文件夾，這就是最後的成品頁面，在打包好的最底下爲們會看到一個黃色的警告。
提示：建立文件是放在一個HTTP服務器。打開index.html文件：/ /不工作。當直接使用瀏覽器打開文件時，瀏覽器控制檯會報錯。
很多資源都加載失敗，仔細看一下路徑，絕對路徑，F盤下哪有static文件夾，那就要將打包的路徑改爲相對路徑，這個根據build命令一路跟蹤，到config\index.js文件中的build對象，將assetsPublicPath中的“/”，改爲“./”即可，就在前面加個點就可以了，並在build\build.js將這兩句的提示信息刪掉或註釋掉，再打包直接用瀏覽器直接運行就好了。
index.html就是單頁應用的頁面，static文件夾下的兩個文件夾是什麼，都知道，就不多說。這裏的文件名和文件路徑都是可以通過配置文件修改的，具體可以按照命令的執行看一下。
另外注意下，在進行頁面調試時，請用Chrome瀏覽器，因爲要使用到vue-tool擴展程序，這個擴展程序，自己去谷歌商店下載，這個絕對要科學上網的。打開之後可以看到。
右上角有個vue小logo，表示我們已經安裝vue-tool擴展工具，並且啓用了，F12打開調試工具，會多一個Vue選項，沒有看到的話點擊最後面的“>>”按鈕，就可以看到所有的功能了，要是還是沒有，就重啓一下瀏覽器。在這裏看到組件的層級結構。
