Vue全家桶

一、简介

武林至尊，宝刀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