在上一篇有說到一句話——大型項目用Vue-cli來搭建比較方便，這也是一般的框架都會提供的福利，而且不僅如此，例如傳說中的全家桶可以讓我們更快捷的完成vue項目。
一、Vue全家桶
所謂全家桶，是指便于構(gòu)建較大項目所需要的一些Vue插件——當然是可以定制的。
一般而言，標準的全家桶包含——
1 vue-cli——腳手架
2 vue-router——路由
3 vuex——狀態(tài)管理
4 vue-axios——網(wǎng)絡請求
二、vue-cli
vue-cli是基于webpack的Vue構(gòu)建、編譯、壓縮、打包的工具，所以對webpack做一些了解是必不可少的——盡管不了解webpack也無妨礙。
PS：在學習前端相關技能時，總是會遇到需要某項知識為前提，如此循環(huán)，很容易疲憊。（值得安慰的是，并不是所有的東西都需要精通）
2.1 webpack簡介
2.1.1 定義和目標
將整個項目分解成各種模塊，運用不同的插件進行編譯打包，處理成可運行的js等文件；提供客戶端按需進行增量加載的可能。
2.1.2 核心思想
webpack將一切都作為模塊進行處理。
2.1.3 基本方法
1、插件：webpack依靠內(nèi)置的插件和第三方插件提供各種豐富的功能；
2、loaders：webpack本身只能處理js文件，對于css、scss、png等文件的處理需要通過適當?shù)膌oaders來進行處理，如css-loader、style-loader、url-loader等；
3、多入口對應多輸出文件；
2.1.4 基礎命令
webpack origin.js bundle.js --module-bind 'css=style-loader!css-loader'
2.1.5 基礎配置文件
entry: {
pageA: "./pageA",
pageB: "./pageB"
},
output: {
path: path.join(__dirname, "js"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
module: {
loaders: [{test: /\.json$/, loader: "json"},
{test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
{test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')}]
},
plugins: [HtmlWebpackPlugin({filename: 'index.html', template: 'index.html', inject: true})]}
2.2 vue-cli簡介
使用vue-cli，你只需要按下一個快門：
$ npm install --global vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
vue-cli中的相關目錄：
build——編譯腳本，包括webpack配置；
config——編譯版本控制；
src——需要被編譯的文件，包括js、css、png等；
static——不需要被編譯的文件，例如字體文件、三方庫、圖片等；
index.html——對應的頁面html；
package.json——依賴模塊配置；
三、vue-router
3.1 了解web路由
web路由那些事兒（一）
web路由那些事兒（二）
你可以了解到：
3.1.1 web路由的由來、定義和組成；
3.1.2 單頁面路由的基本原理；
3.1.3 怎樣實現(xiàn)自定義路由；
3.2 vue-router要點
事實上，你可以在vue官網(wǎng)的生態(tài)系統(tǒng)中找到詳細的文檔。
3.2.1 <router-link>：路由超鏈接；
3.2.2 <router-view>：路由視圖，用于顯示對應的模板或組件；
3.2.3 路由元信息：定義路由記錄；
3.2.4 動態(tài)路由：跳轉(zhuǎn)時傳遞參數(shù)；
3.2.5 子路由：路由可以嵌套；
3.2.6 鉤子：beforeEach、afterEach、beforeEnter等；
3.2.7 路由信息對象：this.$route、$route——path、params、hash、fullPath；
四、vuex
4.1 vuex是什么？
事實上vuex（狀態(tài)管理模式）要解決的根本問題，就是變量和視圖之間的一致性。
通俗的講，
4.1.1 問題：
變量a會在n個地方變化，而a變化時button b和image c必須在紅黃藍之間進行切換。
4.1.2 經(jīng)典方案：
定義函數(shù)changeColor = function(view, a) {
根據(jù)a的值更改a的顏色；
}
然后在每個改變a值的地方執(zhí)行changeColor即可。
4.2.2 vuex方案：
建立單獨的存儲區(qū)域（或者說就是一個對象）
objectA = {a: undefined,
views: views[],
changeValuea: function(value){
a = value;
根據(jù)a的值改變a的顏色；
}
}；// vex還增加了同步異步操作的區(qū)分
然后在每個改變a值的地方執(zhí)行objectA.changeValuea即可。
很明顯，經(jīng)典方案比起vuex的方案看起來更簡潔明了（至少在不考慮同步異步的情況下）；然而當變量a多起來并且對應的view更多時，很容易造成代碼和邏輯的混亂，此時vuex整體思路的優(yōu)勢就會體現(xiàn)出來了。所以很容易得出結(jié)論：
當前項目不那么龐大或者狀態(tài)之間比較清晰地情況下，是不推薦使用vuex的；只有那些項目比較龐大、狀態(tài)關系足夠復雜的情況下再去考慮引入vuex。
4.2 vuex要點
事實上，你可以在vue官網(wǎng)的生態(tài)系統(tǒng)中找到詳細的文檔。
4.2.1 state——狀態(tài)值
4.2.2 getters——獲取狀態(tài)值及其派生值（計算屬性）
4.2.3 mutations——改變state值的唯一媒介
4.2.4 actions——改變state值的中介，即媒介值
4.2.5 modules——模塊劃分，避免糾纏復雜
4.2.6 commit——發(fā)起action更改state的接口，內(nèi)部方法
4.2.7 dispatch——發(fā)起action更改state的接口，外部接口
五、vue-axios
axios其實只是對網(wǎng)絡請求AJAX的封裝，類似于jQuery AJAX對JS AJAX的封裝一樣。
axios并非官方插件，它取代之前的vue-ressource被vue官方推薦，可以閱讀GitHub文檔。喜歡中文的同學可以移步到這里。
由于直接和底層的HTTPRequest打交道又不是一件令人愉快的事情，所以引入vue-axios也是勢在必行的（當然你也可以自己封裝一下）。
六、總結(jié)
一般我們開始一個Vue單頁面應用是，都是采用vue-cli + vue-router + vue-axios的模式進行，然后根據(jù)項目的復雜程度選擇是否使用vuex。
