Vue的项目开发，你应该知道什么

Vue进行项目开发，我们需要懂得知识栈，应该由这么一些部分构成：vue.js、vue-router、vuex、axios、vue的单文件组件、element-ui等。这些部分，就是vue项目开发的全家桶。

1. vue.js

vue.js——是vue开发的基础。这些基础的技能组成有这样的一些东西。

<1>、vue的基本指令。

• v-if
• v-for
• v-model
• v-bind
• v-on

<2>、vue的组件传值

• 父传子——使用props
• 子传父——使用事件$emit

<3>、vue的单文件组件（.vue文件）

以.vue结束的文件，是vue的一大特点。它由三部分组成： template、script、style。

• template——代表单文件组件的模板。
• script——代表单文件组件的JavaScript。
• style——代表单文件组件的样式。

<4>、vue的生命周期（四个时期）

• create
• mount
• update
• destory

每个时期都有对应的两个状态。（例如：beforeCreate、created）

2、vue-router

vue-router是一个项目的骨架。组件是一个vue项目的血肉。他们组合起来，形成一个vue的项目。

• vue-router有三个核心点：router-link、router-view、router对象。
• router-link代表了跳转路由的链接。
• router-view代表了路由对应的page组件。
• router定义了函数式路由的方式：push、replace、go方法。

其中，go方法一般是用来回退一个页面的，也就是：go(-1)。

3、axios

axios定义了vue的数据请求方式，另一个常用的数据请求方式是vue-source。

但是，个人认为，axios才是vue项目最好的数据请求方式，因为它提供了自身的拦截器接口。

axios对象的常用api有很多，个人常用的方式是：

• axios.get()
• axios.post()
• axios.request()

4、element-ui

适合vue的ui框架挺多，但是个人觉得，element-ui是比较好用的那一个，如果你做的是一个后台管理系统。那么，就选element-ui吧！准没错。

提供了完美的表单验证方式。

提供了完整的layout布局、以及常见的布局组织方式。

提供了丰富的界面导航系统。

5、vuex

单页面应用的一大痛点，就是复杂的数据状态管理。

vuex就是vue针对自身而提供的一种数据管理工具。

vuex的核心是一个store对象，维护这一个全局的状态树——state。

vuex提供了两种方式获取state。一种是直接获取state。一种是通过getters来获取。

vuex的数据改变的方式也有两种，一种是同步的mutations（commit），一种是异步的actions（dispatch）。

vuex为了模块化的进行数据管理，提供了modules的属性。

6、一些常用的有关vue项目的网站

vue-router文档 https://router.vuejs.org/zh-cn/

ElementUi文档 http://element-cn.eleme.io/#/zh-CN

axios中文文档 https://www.kancloud.cn/yunye/axios/234845

moment.js中文文档 http://momentjs.cn/docs/

7、项目模板

一个基于vue、vue-router、vuex、element-ui的项目模板：

github地址：https://github.com/liwudi/manage-platform.git