vue.js著名的全家桶系列，包含 vue-router，vuex，axios，再加上构建工具vue-cli，sass样式，就是一个完整的vue项目的核心构成。
简单概括：1、项目构建工具、2、路由、3、状态管理、4、http请求工具
搭建好的项目目录结构如下
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。
http://cli.vuejs.org/
http://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）。
http://router.vuejs.org/
http://github.com/vuejs/vue-router
作用/特性
我们知道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
具体的用法不作详细介绍，参看下面链接
http://router.vuejs.org/zh/api/#router-link
vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
如同React有Redux一样，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 vue-devtools
http://vuex.vuejs.org/zh/
http://github.com/vuejs/vuex
http://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 | 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
http://www.axios-js.com/
http://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 => {
// 错误回调
})
❤️ 最后
如果觉得这篇文章对你有帮助，点个「关注/转发」，让更多的人也能看到你的分享！
,
