都說Vue2簡單，上手容易，但小馬過河，自己試了才曉得，除了ES6語法和webpack的配置讓你感到陌生，重要的是思路的變換，以前隨便拿全域性變數和修改dom的錘子不能用了，變換到關注資料本身。vue的官方文件還是不錯的，由淺到深，但是當你用vue-cli構建一個工程的時候，發現官方文件還是不夠用，得參考git上開源的專案並去學習es6。而且vue的全家桶(vue-cli,vue-router,vue-resource,vuex)還是都要上的。

1.vue-cli
這個構建工具大大降低了webpack的使用難度，支援熱更新，有webpack-dev-server的支援，相當於啟動了一個請求伺服器，給你搭建了一個測試環境，你只關注開發就好。

# 全域性安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

熱更新的機制是檢測檔案的變化並用websocket通知客戶端做出相應的更新。詳細的可以移步：【webpack】– 模組熱替換

2.vue-router
vue的路由還是很方便的，比ag1的時候要方便很多。這種方便體現在三個方面：

1個是路由和頁面(元件)對應：

import
 
 Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Chat from '@/components/Chat'
import Firends from '@/components/Firends'
import Logon from '@/components/Logon'

Vue.use(Router)
let router=new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
     { path: '/'
 
, redirect: '/home' },//重定向
    {
      path: '/chat',
      name: 'Chat',
      component: Chat
    },
    {
      path: '/firends',
      name: 'Firends',
      component: Firends
    },
    {
      path: '/logon',
      name: 'Logon',
      component: Logon
    }
  ]
});

常人的思路就是這樣，而ag1中還需要帶上控制器(vue中沒有這個概念,取而代之的是關注元件就行)，這樣用起來更簡單。MVC模式中，需要指到controller下的action，如果導航分類多，對應策略是巢狀路由。

2個是可以具體到元素了：

<router-link    class="footer-item"  exact  to="home">首頁</router-link>

這個to後面的home(忽略大小寫)就是上面定義的路由名稱。這樣就很方便了。類似於Asp.net MVC 的路由可以用名稱來渲染出路徑，而不用什麼時候都要輸入路徑。

3個是事件攔截：

如果我們要做驗證，最好不過的就是在使用者到達頁面之前進行驗證：

router.beforeEach((to, from, next) => {
  //todo 以後增加不需要驗證的地址判斷
  if(to.path!=="/logon"&&!store.state.userInfo.Account){
     next({ path: '/logon' })
     return;
  }else{
   next();
  } 
})

3.元件中使用元件
看了幾個移動UI庫，一開始奇怪怎麼沒有footer元件，現在明白，路由都這麼方便了，第三方ui沒必要封裝了footer，也不方便封裝(因為依賴路由)。於是導航可能是你需要自己來寫的第一個元件。

比如定義了個Footer.vue

<template>
    <footer class="footer">
     <router-link    class="footer-item"  exact  to="home">
     <span class="icon icon-home">
     </span>
     <label>首頁</label>
     </router-link>
     <router-link    class="footer-item"   to="statistics">
      <span class="icon icon-stat">
      </span>
      <label>統計</label>
     </router-link>
       <router-link    class="footer-item"   to="more">
      <span class="icon icon-more">
      </span>
      <label>更多</label>
     </router-link>
  </footer>
</template>

<script>
  export default {
  name: 'VFooter'
}
</script>

只在App.Vue中就需要引入

import VFooter from './VFooter'

export default {
name: 'app',
data () {
return {
msg: 'this is home'
}
},
components:{VFooter}
}

然後在App.Vue中就可以使用了

如果是要註冊到全域性 就用先在main.js中引入
import Footer from ‘./components/VFooter’
//
Vue.component(‘VFooter’, Footer)//寫在建構函式之前
到了這一步就可以愉快的組裝自己的頁面了。如果需要給頁面加上滑動效果，可以加一個transition(位於app.vue):

<transition  name="slide-in" mode="out-in">
    <router-view></router-view>
   </transition>

.slide-out-enter-active,
.slide-out-leave-active,
.slide-in-enter-active,
.slide-in-leave-active {
  will-change: transform;
  transition: all 400ms;
  position: absolute;
}
.slide-out-enter {
  opacity: 0;
   transform: translateX(-100%);

}
.slide-out-leave-active {
  opacity: 0;
   transform: translateX(100%);

}
.slide-in-enter {
  opacity: 0;
   transform: translateX(100%);

}
.slide-in-leave-active {
  opacity: 0;
   transform: translateX(-100%);

如何做到左右切換呢?

4.vue-resource
頁面敲好了，得能發請求。https://github.com/pagekit/vue-resource 而前端如果不是自己寫的介面首先關心的還是怎麼設定代理，這個位於config/index.js下面的proxyTable。

proxyTable: {
    '/api':
     {
           target: 'http://11.111.249.12:11',
           changeOrigin: true,
           pathRewrite:
           {
              '^/api': ''
            }
    },

跨域的設定不能少了changeOrigin。另外需要注意最後的這個’^/api’: ”。 要注意你選擇的”/api”是不是原路徑中的一部分，不然容易出錯。

然後還有一部分就是設定請求頭(main.js)：

import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.http.interceptors.push(function(request, next) {// modify method
  //request.method = 'POST';

  // modify headers

  request.headers.set('token',“token”);// continue to next interceptor
  next();
});

5.vuex
全家桶裡面一開始最讓我懵逼的就是這個vuex。這是個什麼鬼，為什麼需要這個。沒有玩過React，不知道什麼是狀態管理。當你想用一個全域性變數的時候，你發現之前的招都不靈了。比如設定一個登入狀態

let login=(name,pwd,success,fail)=>{
    Vue.http.post(loginUrl,{account:name,password:pwd}).then(res=>{
　　　　　//....
        window.hasLogin=true;

 },res=>{ fire(fail,"請求失敗"); }) }

然後再首頁顯示出來：

<div @click="toggle">{{hasLogin}}</div>

data () {
    return {
      hasLogin:window.hasLogin
    }
  },
   methods:{
     toggle(){
       window.hasLogin=!window.hasLogin;
       console.log("clicked",window.hasLogin)
     }
   },

你發現你登入之後確實顯示了true，但怎麼點選也不會切換false或true。
需要再賦值一次：

this.hasLogin=window.hasLogin;
為什麼呢？因為你自己定義的變數，根本不屬於vue的model。也就是沒有處理過geter和seter,雖然變數的值是變化了，但仍然無法改變介面上的狀態。所以你需要一個狀態管理，按照一定的機制把你的變數變換成vue內部的模型。這個東西就是vuex。因為約定比較多，略顯複雜點，但是耐心看一下還是很容易接受的。它主要分四個部分，state,getters,mutations,actions。先定義一個user.js如下：

state就是我們放共享變數的地方。比如下面的userInfo.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const userStore=new Vuex.Store({
   state:{
       userInfo:{
           userName:""
       }
   },
   getters:{
       getUserInfo(state){
           return state.userInfo;
       }
   },
   mutations:{
       setUserInfo(state,userInfo){
           state.userInfo=userInfo;
       }
   },
   actions:{
       setUserInfo({commit}){
           commit('setUserInfo');
       }
   }

})
export default userStore;

而getters顧名思義就是獲取介面，mutations(突變)這個詞有點唬人，其實就是setters嘛。裡面的方法自帶state引數。而actions就是mutations的非同步方法。然後再main.js中引用一下：

import store from './store/user';
//...
 new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

然後我們在設定或獲取的時候就可以使用指定的方法：

import store from ‘@/store/user’;
//…
store.commit(‘setUserInfo’,user)
可以直接通過store.state獲取變數，也可以通過getters介面：

computed:{
…mapGetters({username:’getUserName’})
},
這三個點是es6中的擴充套件運算子。將一個數組轉為用逗號分隔的引數序列。

當然這些狀態重新整理之後就沒有了，如果想要暫存下來，可以放到sessionStorage中：

if (window.sessionStorage.user) {
var json=JSON.parse(window.sessionStorage.user);
store.commit(‘setSessionUser’,json)
}
當然要在muations中放進去

 //個人資訊
  setUserInfo(state,user)
  {
  state.userInfo=user;
   window.sessionStorage.user=JSON.stringify(state.userInfo);
  },

官方文件： https://vuex.vuejs.org/zh-cn/
小結：到這兒基本五臟俱全了，可以愉快的玩耍了。還有一個是對生命週期的理解。元件例項每次載入都會執行一遍，所以在生命週期的方法中做請求和繫結的時候要清楚這一點。

其他: