前言

vue.js著名的全家桶系列，包含 vue-router，vuex，axios，再加上构建工具vue-cli，sass样式，就是一个完整的vue项目的核心构成。

简单概括：1、项目构建工具、2、路由、3、状态管理、4、http请求工具

搭建好的项目目录结构如下

vue-cli 脚手架

vue-cli：vue脚手架，自动帮你搭建基本代码框架。cli 就是(command-line-interface ) 命令行界面。

vue-cli脚手架构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，你就可以方便的直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境。

vue-cli基于node环境利用webpack对文件进行编译、打包、压缩、es6转es5等一系列操作。目前vue-cli已经升级到3.0版本，3.0所需webpack版本是4.xxx，2.0所需的webpack版本是3.xxx。

https://cli.vuejs.org/

https://github.com/vuejs/vue-cli

vue cli2.x安装与创建项目

$ npm install -g vue-cli
$ vue init webpack my-project

vue cli3.x安装与创建项目

$ npm install -g @vue/cli
$ vue create my-project 或 vue ui

注意

如果使用 “npm install -g vue-cli” 命令进行安装的话，下次使用脚手架cli3.x的时候就得先卸载脚手架cli2.x，然后安装脚手架cli3.x，为了减少不必要的操作我们执行 “npm install -g @vue/cli ” 命令进行安装，然后再执行 “npm install -g @vue-cli-init” 将脚手架cli2.x下载下来，在此环境下既可以安装脚手架cli2.x的模板，又可以安装脚手架cli3.x的模板。

vue-router 路由

vue-router：Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得简单。

Vue路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

https://router.vuejs.org/

https://github.com/vuejs/vue-router

作用/特性

是vue路由插件

支持单页应用的

路由设置，用于设置页面跳转时的路径

vue-router还可以实现页面间传参等功能

vue-router还包含router-link、router-view 等组件

我们知道Vuejs是一系列的组件组成应用，既然是组件那么就需要组合起来，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们！

vue中配置路由

在src目录下新建router/index.js

vue中引入路由

在main.js中挂载router到vue实例中去

在App.vue页面使用router-view来告诉router在哪里渲染组件

vue中使用路由router-link

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名。

<router-link>组件的属性

to 、replace、append、tag、active-class、exact 、event、exact-active-class

具体的用法不作详细介绍，参看下面链接

https://router.vuejs.org/zh/api/#router-link

vuex 状态管理

vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

如同React有Redux一样，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 vue-devtools

https://vuex.vuejs.org/zh/

https://github.com/vuejs/vuex

https://github.com/vuejs/vue-devtools

vuex主要用于全局状态管理，方便组件间的状态共享。主要涉及Store、Mutation、Action、Getter

state:用来数据共享数据存储
mutation:用来注册改变数据状态
getters:用来对共享数据进行过滤操作
action:解决异步改变共享数据

vue中配置vuex

在src目录下新建vuex/index.js

vue中引入vuex

在main.js中挂载vuex到vue实例中去

在组件中，我们需要这样去调用mutation

this.$store.commit('LOGOUT')

在实际生产过程中，会遇到需要在提交某个mutation时需要携带一些参数给方法使用

this.$store.commit('SET_TOKEN', 'andy')

当需要多参数提交时，推荐把他们放在一个对象中来提交

this.$store.commit('SET_USER', {age:18, sex:'男'})

此时mutation中的设置如下

SET_USER (state, payload){
  state.user = 'jack'
  console.log(payload) // andy或{age:18, sex:'男'}
}

axios介绍

Axios | 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios浏览器支持

http://www.axios-js.com/

https://github.com/axios/axios

作用/特性

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

安装

$ npm install axios -S

vue中全局使用axios

直接把axios挂载到vue构造函数的prototype属性上，组件中通过this.axios来拿到axios
通过vue-axios来全局使用axios，组件中也是通过this.axios来拿到axiosl

// 第一种方法
// main.js
import Vue from 'vue'
import axios from 'axios'

Vue.prototype.axios = axios

//第二种方法
// main.js
import Vue from 'vue'
import axios from 'axios'
import Vueaxios from 'vue-axios'

Vue.use(Vueaxios, axios)

axios中get与post方法

// 组件中使用get方法
this.axios.get(url, parmas: {a: 1, b: 2})
  .then(res => {
    // 成功回调
  }, res => {
    // 错误回调
  })

// 组件中使用post方法
this.axios.post(url, {a: 1, b: 2})
  .then(res => {
    // 成功回调
  }, res => {
    // 错误回调
  })

❤️ 最后

如果觉得这篇文章对你有帮助，点个「关注/转发」，让更多的人也能看到你的分享！

vue2.x全家桶技术盘点

前言

vue-cli 脚手架

vue-router 路由

vuex 状态管理

axios介绍