vue全家桶

用vue那么久，你清楚vue全家桶都有谁不？
构建工具vue-cli，路由vue-router，状态管理vuex， http请求工具vue-resource，再加合适的UI组件库，就可以实现一个完整的前端工程项目。

一、vue-cli

vue-cli是快速构建应用的脚手架。
安装：npm install -g @vue/cli
创建：vue create my-project

二、vue-router

1、vue-router是vue官方的路由管理器，包含的功能主要有：

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

2、安装使用步骤

// （1）安装
npm install vue-router
// （2）在main.js中引入
import VueRouter from 'vue-router'
// （3）通过Vue.use()明确地安装路由功能。
Vue.use(VueRouter)

 

三、vuex

vuex是vue的状态管理模式，它采用集中式存储管理所有组件的状态，并以相应规则保证状态以可预测的方式发生变化。她比较适合中大型单页应用。它主要包括这几个部分：

1、State——存放数据和状态

State是vuex中的数据源，在页面中可以通过this.$store.state获取数据。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 创建vuex实例
const store = new Vuex.store({
    state:{
        count: 1
    }
})
// 在页面中这样获取：
<h2>{{this.$store.state.count}}</h2>

 

2、mutation——只支持操作同步

如果需要修改store中的值怎么办？唯一的办法就是提交Mutation。比如我们在按钮的点击事件中提交mutations中的方法来修改值。

// 页面文件
<p>count的值：{{this.$store.state.count}}</p>
<button @click="addFun"></button>
addFun(){
    this.$store.commit("add");
}
// vuex文件
mutations:{
    add(state){
        state.count=state.count+1;
    }
}

 

3、Action——支持异步调用，提交的是mutation，而不是直接变更状态

官方不建议直接修改store中的值，而是建议我们提交一个actions，在actions中提交mutation再去修改状态值。

// vuex文件
actions: {
    addFun(context){   // 接收一个与store实例有相同方法的属性的context对象
        context.commit("add");
    }
}
// 页面文件：
methods: {
    addFun(){
        this.$store.dispatch("addFun");
    }
}

 

4、Getters

getter相当于vue中的computed属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变时才会被重新计算。Getters 可以用于监听state中值的变化，返回计算后的结果。

state:{
    count: 1
}
getters: {
    getStateCount: function(state){
        return state.count+1;
    }
}
// 页面文件
<h3>{{this.$store.getters.getStateCount}}</h3>

 

四、axios

axios是一个http请求包，它基于promise，可以用在浏览器和node.js中。它可以从浏览器中创建xhr，从Node.js创建http请求，支持Promise API，转换请求数据和响应数据，自动转换JSON数据等。
安装方法：npm install axios --save

axios.get('/user?ID=12345').then(function(res){
   console.log(res);
}).catch(function(err){
  console.log(err);
});
// 也可以用下面的方式：
axios.get('/user', {
  params:{
    ID: 12345
  }
}).then(...)

 

五、搭配UI框架

适用于移动端的有：vant、mint-ui等。
适用于pc端中后台的：ivew、Ant Design Vue、elementUI等。