一、簡介

武林至尊，寶刀React，號令天下，莫敢不從，Vue不出，誰與爭鋒
本文介紹Vue全家桶：Vue+Vue-router+Vuex+axios。

二、Vue

Vue 是一套用于構建用戶界面的漸進式框架，和React，都自稱自己只關注視圖層

1.引入Vue

• 開發環境：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 生產環境：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.一個小demo

在完成Vue都引入后，再分別 編寫DOM 和 新建Vue實例：

<!-- 兩對花括號{{}} 為模版語法。
這里渲染message變量，也就是下面new Vue時data.message -->
<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',  // 選擇器，用來找到id為app的DOM節點
  data: {  // data屬性用來存儲數據
    message: 'Hello Vue!'
  }
})

此時，如果頁面顯示了Hello Vue!，說明Vue正常工作。
具體文檔請看 Vue官方教程

三、Vue-router

1.功能

Vue-router可以幫你：

• 嵌套的路由/視圖表
• 模塊化的、基于組件的路由配置
• 路由參數、查詢、通配符
• 基于 Vue.js 過渡系統的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的鏈接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行為

2.示例

例子請看Vue-Router官方例子

四、Vuex

如同React有Redux一樣，Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式，適合開發大型單頁應用。

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

具體見 Vuex官方教程

五、axios

1.簡介

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它可以幫你：

• 從瀏覽器中創建 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止 CSRF/XSRF

2.一個小demo

// 創建示例
const instance = axios.create();

// 指定超時時間
instance.defaults.timeout = 2500;

// get請求longRequest， 為這個接口單獨指定5s的超時時間
instance.get('/longRequest', {
  timeout: 5000
});

// 正常get請求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 處理成功返回
    console.log(response);
  })
  .catch(function (error) {
    // 處理錯誤
    console.log(error);
  })
  .finally(function () {
    // 處理無論成功/失敗都執行的代碼
  });

API具體見文檔 axios-github

（完）