智一面--你绝对不能错过的vue全家桶

562 08-04

前端工程师至少需要掌握一种框架语言，今天这篇文章就给大家说一说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.一个例子

在完成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-router

1.功能

Vue-router可以帮你：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

三、Vuex

如同React有Redux一样，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，适合开发大型单页应用。

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

四、axios

1.简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它可以帮你：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

2.一个例子

// 创建示例
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 () {
     // 处理无论成功/失败都执行的代码
   });

标签： Vue.js