都說Vue2簡單上手容易，的确，看了官方文檔确實覺得上手很快，除了ES6文法和webpack的配置讓你感到陌生，重要的是思路的變換，以前用jq随便拿全局變量和修改dom的錘子不能用了，vue隻用關心資料本身，不用再頻繁繁瑣的操作dom，注冊事件、監聽事件、取消事件。。。。（确實很煩）。vue的官方文檔還是不錯的，由淺到深，如果不使用建構工具确實用的很爽，但是這在實際項目應用中是不可能的，當用vue-cli建構一個工程的時候，發現官方文檔還是不夠用，需要熟練掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)還是都要上的。
vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上建構工具vue-cli，就是一個完整的vue項目的核心構成。
vue-cli這個建構工具大大降低了webpack的使用難度，支援熱更新，有webpack-dev-server的支援，相當于啟動了一個請求伺服器，給你搭建了一個測試環境，隻關注開發就OK。
① 使用npm（需要安裝node環境）全局安裝webpack，打開指令行工具輸入：<code>npm install webpack -g</code>或者（<code>npm install -g webpack</code>），安裝完成之後輸入 <code>webpack -v</code>，如下圖，如果出現相應的版本号，則說明安裝成功。
② 全局安裝vue-cli，在cmd中輸入指令:
（我已經安裝過，為了更直覺我在電腦上重新示範下）
安裝成功：
安裝完成之後輸入 vue -V（注意這裡是大寫的“V”），如下圖，如果出現相應的版本号，則說明安裝成功。
打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到：
打開node_modules也可以看到：
① 我首先在D盤建立一個檔案夾（dxl_vue）作為項目存放地，然後使用指令行cd進入到項目目錄輸入：
baoge是自定義的項目名稱，指令執行之後，會在目前目錄生成一個以該名稱命名的項目檔案夾。
輸入指令後，會跳出幾個選項讓你回答：
Project name (baoge)： -----項目名稱，直接回車，按照括号中預設名字（注意這裡的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師部落格為什麼檔案名要小寫 ，可以參考一下。
Project description (A Vue.js project)： ----項目描述，也可直接點選回車，使用預設名字
Author ()： ----作者，輸入dongxili
接下來會讓使用者選擇：
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，這是官方的路由，大多數情況下都使用，這裡就輸入“y”後回車即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。
接下來也是選擇題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回車
回答完畢後上圖就開始建構項目了。
② 配置完成後，可以看到目錄下多出了一個項目檔案夾baoge，然後cd進入這個檔案夾：
安裝依賴：
( 如果安裝速度太慢。可以安裝淘寶鏡像，打開指令行工具，輸入：
<code>npm install -g cnpm --registry=https://registry.npm.taobao.org</code>
然後使用<code>cnpm</code>來安裝 )
npm install ：安裝所有的子產品，如果是安裝具體的哪個個子產品，在install 後面輸入子產品的名字即可。而隻輸入install就會按照項目的根目錄下的package.json檔案中依賴的子產品安裝（這個檔案裡面是不允許有任何注釋的），每個使用npm管理的項目都有這個檔案，是npm操作的入口檔案。因為是初始項目，還沒有任何子產品，是以我用npm install 安裝所有的子產品。安裝完成後，目錄中會多出來一個node_modules檔案夾，這裡放的就是所有依賴的子產品。
然後現在，baoge檔案夾裡的目錄是這樣的：
解釋下每個檔案夾代表的意思(仔細看一下這張圖）：
如果浏覽器打開之後，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置檔案 config裡的index.js
還有，如果本地調試項目時，建議将build 裡的<code>assetsPublicPath</code>的路徑字首修改為 ' ./ '（開始是 ' / '），因為打包之後，外部引入 js 和 css 檔案時，如果路徑以 ' / ' 開頭，在本地是無法找到對應檔案的（伺服器上沒問題）。是以如果需要在本地打開打包後的檔案，就得修改檔案路徑。
我的端口沒有被占用，直接成功（服務啟動成功後浏覽器會預設打開一個“歡迎頁面”）：
注意：在進行vue頁面調試時，一定要去谷歌商店下載下傳一個vue-tool擴充程式。
從<code>package.json</code>可以看到開發和生産環境的入口。
可以看到dev中的設定，build/webpack.dev.conf.js，該檔案是開發環境中webpack的配置入口。
在webpack.dev.conf.js中出現webpack.base.conf.js，這個檔案是開發環境和生産環境，甚至測試環境，這些環境的公共webpack配置。可以說，這個檔案相當重要。
注意，自己的項目檔案都需要放到 src 檔案夾下。
在項目開發完成之後，可以輸入 <code>npm run build</code> 來進行打包工作
打包完成後，會生成 dist 檔案夾，如果已經修改了檔案路徑，可以直接打開本地檔案檢視。
項目上線時，隻需要将 dist 檔案夾放到伺服器就行了。
好了，史上最詳細版vue2腳手架出爐了，由于是全家桶第一篇，是以過于詳細，後面我隻會寫關鍵步驟，多加入點執行個體。[微笑]