一、简介
武林至尊，宝刀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
（完）
