序言

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的全力支持，相等于开启了两个允诺伺服器，给你构筑了两个OWL，你就能方便快捷的间接早已开始做合作开发，著眼你的销售业务，而不必再花天数去实用性那个合作开发自然环境。

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/vuexhttps://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 => { // 错误回调 })