? ? ? ? ? ? ? ? ????????????vue? ?全家桶
? ??Vue有著名的全家桶系列微峰，包含了：
????vue-router钮追，vuex宦搬，vue-resourc沈自。再加上構(gòu)建工具vue-cli，sass樣式,就是一個完整的vue項目的核心構(gòu)成笤喳。
概括起來就是：为居、
????????1.項目構(gòu)建工具
????????2.路由、
????????3.狀態(tài)管理杀狡、
????????4.http請求工具蒙畴。
一、Vue-cli是快速構(gòu)建這個單頁應(yīng)用的腳手架,
# 全局安裝 vue-cli
????npm install --global vue-cli（國際版）
? ? cnpm install --global vue-cli(國內(nèi)版)
????創(chuàng)建一個基于 webpack 模板的新項目
????vue init webpack my-project（構(gòu)建項目）
????安裝依賴呜象，
? ?cd my-project（cd 到項目）
? ?npm install? ? （下載依賴）
? ? ?cnpm instal
? ? ?pm run dev（進入項目）
二膳凝、vue-router
安裝：npm installvue-router
如果在一個模塊化工程中使用它，必須要通過?Vue.use()?明確地安裝路由功能：
（import）恭陡，（Vue）蹬音，（from'vue'），（import）休玩，（VueRouter）著淆，（from'vue-router'），? ? ·Vue.use(VueRouter)
在使用中拴疤，可以利用vue的過渡屬性來渲染出切換頁面的效果永部。
三、vuex
vuex是專門為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理全局的數(shù)據(jù)管理遥赚。vuex主要分五部分組成：1扬舒，state ,2，action,3凫佛，mutation,4讲坎，getters,5，mudle組成愧薛。
? ? 下載方式：npm install vuex --save
? ? vuex使用上組件中可以直接調(diào)用上面四個mudle除外晨炕，
1、state
類似vue 對象的data, 用來存放數(shù)據(jù)以及狀態(tài)毫炉。存放的數(shù)據(jù)為響應(yīng)式瓮栗，如果數(shù)據(jù)改變，那么依賴數(shù)據(jù)的組件也會發(fā)生相應(yīng)的改變瞄勾。
獲取state簡單的例子：
1.store.getters['getRateUserInfo']
注意：可以通過mapState把全局的state和getters映射到當(dāng)前組件的computed計算屬性中费奸。
2、actions
Action 通過?store.dispatch?方法觸發(fā)：action支持異步調(diào)用（可以調(diào)用api）进陡，mutation只支持操作同步愿阐，并且action提交的是 mutation，而不是直接變更狀態(tài)趾疚。
例如：
const store = new Vuex.Store({
? state: {
??? count: 0
? },
? mutations: {
??? increment (state) {
????? state.count++
??? }
? },
? actions: {
??? increment (context) {
????? context.commit('increment')
??? }
? }
})
Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象缨历，因此你可以調(diào)用?context.commit?提交一個 mutation以蕴，或者通過?context.state?和?context.getters?來獲取 state 和 getters。
四辛孵、axios
axios是一個http請求包丛肮，vue官網(wǎng)推薦使用axios進行http調(diào)用。
安裝：npm install axios --save
? ? ? ? ????cnpm install axios --save
? ?例子：
1.發(fā)送一個GET請求
//通過給定的 ID 來發(fā)送請求
axios.get('/user?ID=12345')? .then(function(response){
?console.log(response);
? })
? .catch(function(err){
??? console.log(err);
? });
//
以上請求也可以通過這種方式來發(fā)送
axios.get('/user',{
? params:{
??? ID:12345
? }
})
.then(function(response){
? console.log(response);
})
.catch(function(err){
? console.log(err);
});
2
魄缚、
發(fā)送一個POST請求
axios.post('/user',{
? firstName:'Fred',
? lastName:'Flintstone'
})
.then(function(res){
? console.log(res);
})
.catch(function(err){
? console.log(err);
});
