vue+Element后台管理系统框架搭建

vue框架搭建及开发规范1.1环境配置1.2项目创建1.开始搭建项目vueProject2.打开我们的项目，可以看到如下的目录结构： 1.3开发规范1.vueProject的目录结构：2.项目创建及命名规范 2.vue2.0概念和语法2.1 Vue.js的目的2.2 Vue.js特性1.MVVM模式 2.4 Vue核心思想1.数据驱动2.组件化3.指令系统4.Vue.js 2.0开始支持虚拟DOM（Vue.js 1.0 是操作的真是DOM，而不是虚拟DOM）2.5 Vue.js入门2.6 Vue.js指令2.6.1 v-text 单向数据绑定2.6.2 v-html 单向数据绑定2.6.3 v-bind2.6.4 v-show2.6.5 v-if2.6.6 v-else2.6.7 v-for2.6.8 v-on 2.6.9 v-model 双向数据绑定2.7 vue的生命周期2.8 计算属性和监听属性2.9 vue父子组件之间传值 3.vue router4.vuex5.ElementUI

vue框架搭建及开发规范

1.1环境配置

node.js

使用v8.1.3版本来开发

使用nvm来管理node可以方便切换要使用的node版本。

npm 使用5.0.3版本

npm配置了淘宝镜像

npm config set registry https://registry.

webpack

安装版本3.3.0

webpack是一款前端资源模块化管理和打包工具，它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

Vue-cli

vue-cli是一个用于生成vue项目的脚手架工具

vue-cli 我安装的版本2.8.2

安装：npm install -g vue-cli

同样在命令行输入 vue -V 检测是否安装成功并查看安装的版本，注意是大写的V

如果成功返回：

vuex

安装的版本为2.3.1

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

可以理解为组件通信的集中管理。

vue-router

用于SPA实现单页路由，类似angular的angular-ui-router。

1.2项目创建

1.开始搭建项目vueProject

前面提到了vue-cli脚手架工具，使用起来很简单，在你想创建项目的目录下输入cmd：

vue init webpack vueProject //vueProject就是项目的名字

在输入之后会出现许多配置项，一路enter就可以了。但是其中的ESLint推荐不使用(运行的时候会检查代码规范，规范什么的太麻烦，毕竟是小demo)，ESlint是可以配置规范的，在多人协作开发的过程中，代码的规范非常的重要。有一套良好的代码规范，对于项目的开发和维护都很友好。

下面对每个配置项做个注释：

? Project name vueProject //项目名默认就是vueProject

? Project description A Vue.js project // 文档描述，会在README.md文件上生成输入的内容，默认 A Vue.js project

? Author _**** <****@**.com> // 作者，如果有git，就是读取git的User信息

? Vue build standalone // 有两个选项，第一个选项写着recommended for most users果断选了（至于干什么用到并不知道）

? Use ESLint to lint your code? Yes// 是否使用ESlint 默认是

? Pick an ESLint preset Standard // 选这个一个ESlint类型

? Setup unit tests with Karma + Mocha? Yes //使用单元测试工具karma和mocha 默认是

? Setup e2e tests with Nightwatch? Yes // 使用e2e测试框架 NightWatch 默认是

2.打开我们的项目，可以看到如下的目录结构：

build：webpack打包配置文件夹

config： 同样是打包配置的文件夹，只是职能不同

src：源码存放文件夹

static： 静态文件存放位置

test：测试代码存放位置，展开可以看到单元测试和e2e测试两个目录

.babelrc ： babel的配置文件，有关babel可参见

/blog//01/babel.html

index.html: 单页应用的html文件，可以看成是一个窗口(window)

package.json: npm的配置文件，配置项目信息，需要安装的模块之类

README.md： 项目说明文档

目录分析完了，怎么启动这个项目呢？

在启动之前还需要安装我们的依赖模块，也就是package.json里面的模块，在根目录下cmd：

npm install

这个过程有点久，建议将npm配置为国内镜像，比如我之前说得淘宝镜像

安装完了之后我们的项目目录会多出一个node_modules目录，里面会有很多很多文件夹。

安装完之后就运行我们项目了，在根目录下cmd：

npm run dev

然后浏览器中输入localhost:8080（其实会自动弹出），就可以看到如下页面

1.3开发规范

1.vueProject的目录结构：

├── README.md 项目介绍

├── index.html 入口页面

├── build 构建脚本目录

│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面

│ ├── build.js 生产环境构建脚本

│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新

│ ├── dev-server.js 运行本地开发服务器

│ ├── utils.js 构建相关工具方法

│ ├── webpack.base.conf.js wabpack基础配置

│ ├── webpack.dev.conf.js wabpack开发环境配置

│ └── webpack.prod.conf.js wabpack生产环境配置

├── config 项目配置

│ ├── dev.env.js 开发环境变量

│ ├── index.js 项目配置文件

│ ├── prod.env.js 生产环境变量

├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

├── src 源码目录

│ ├── main.js 入口js文件

│ ├── app.vue 根组件

│ ├── components 公共组件目录

│ ├── assets 资源目录，这里的资源会被wabpack构建

│ │ └── images

│ │ └── logo.png

│ ├── routes 前端路由

│ │ └── index.js

│ ├── store 应用级数据（state）

│ │ └── index.js

│ └── views 页面目录

│ ├── hello.vue

│ └── notfound.vue

├── static 纯静态资源，不会被wabpack构建。

└── test 测试文件目录（unit&e2e）

└── unit 单元测试

├── index.js 入口脚本

├── karma.conf.js karma配置文件

└── specs 单测case目录

└── Hello.spec.js

2.项目创建及命名规范

参照：/a/1190000009805187

注意：

vue 方法放置顺序

components ：组件名定义

props：父组件传值到子组件

data：创建实例

created：生命周期

mounted：生命周期

activited：生命周期

update：生命周期

beforeRouteUpdate：生命周期

metods：函数方法

filter：过滤器

computed：计算属性

watch：监听

2.vue2.0概念和语法

Vue官方文档：VUE中文官方文档

Vue.js是什么？

Vue（法语）同view(英语)

Vue.js是一套构建用户界面（view）的MVVM框架。Vue.js的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有的项目整合。

2.1 Vue.js的目的

Vue.js的产生核心是为了解决如下三个问题：

1.解决数据绑定的问题；

2.Vue.js框架生产的主要目的是为了开发大兴单页面应用（SPA：Single Page Application）Angular.js中对PC端支持的比较良好，但是对移动端支持就一般。而Vue.js主要支持移动端，也支持PC端。

3. 它还支持组件化。也就是可以将页面封装成若干个组件，采用积木式编程 ，这样是页面的复用度达到最高（支持组件化）。

2.2 Vue.js特性

1.MVVM模式

Vue是一套构建用户界面的框架， 开发只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。是基于MVVM（Model-View-ViewModel）设计思想。提供MVVM数据双向绑定的库，专注于UI层面

vue设计思想

View就是DOM层，ViewModel就是通过new Vue()的实例对象，Model是原生js。开发者修改了DOM，ViewModel对修改的行为进行监听，监听到了后去更改Model层的数据，然后再通过ViewModel去改变View，从而达到自动同步。

作者：MysticBoy

链接：参考博客

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

M: model 业务模型，用处：处理数据，提供数据

V: view 用户界面、用户视图

业务模型model中的数据发生改变的时候，用户视图view也随之变化。用户视图view改变的时候，业务模型model中的数据也可以发生改变。

2.4 Vue核心思想

1.数据驱动

数据驱动

数据驱动（数据双向绑定）， 在Vue中，Directives对view进行了封装，当model中的数据发生变化时，Vue就会通过Directives指令去修改DOM，同时也通过DOM Listener实现对视图view的监听，当DOM改变时，就会被监听到，实现model的改变，从而实现数据的双向绑定。

2.组件化

组件化就是实现了扩展HTML元素，封装可用的代码。

1、页面上每个独立的可视/可交互区域视为一个组件。

2、每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护。

3、页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面

3.指令系统

4.Vue.js 2.0开始支持虚拟DOM（Vue.js 1.0 是操作的真是DOM，而不是虚拟DOM）

虚拟DOM可以提升页面的刷新速度。

2.5 Vue.js入门

使用Vue.js的步骤：

第一步：在html页面中引入vue.js

第二步：Vue.js提供了一个Vue,我们需要创建一个对象。

第三步：在用户界面view中，通过{{}}形式将data中的数据显示在页面中。

在用户界面中，{{}}代码中绑定的data的key，而在页面中显示的是该key的value。

Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。

app这个变量会代理vue中data数据。所以我们访问data中数据的时候，直接用app.name就可以了

这样，如果我们要实现前后台交互，只要将从后台得到的数据，放在data中,页面就会自动绑定，这样就实现了从model->view的数据流向。

2.6 Vue.js指令

指令，其实指的就是vue的v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能。

指令的语法：

v-指令名称=”表达式判断或者是业务模型中属性名或者是事件名”

2.6.1 v-text 单向数据绑定

作用：操作元素中的纯文本

快捷方式：{{}}

2.6.2 v-html 单向数据绑定

作用：操作元素中的html

2.6.3 v-bind

作用：v-bind绑定页面中的元素属性。例如：a的href属性，img的src、alt和title属性。

语法：v-bind:元素的属性名 = “data中键名”

在view模板中，可以使用简单的JS表单式，例如：

2.6.4 v-show

作用：通过判断，是否显示该内容。如果值为true，则显示。否则就隐藏。

语法：v-show=”判断表达式”

特点：元素会始终渲染在DOM中，只是被设置了display:none

2.6.5 v-if

作用：判断是否加载固定的内容。如果为真，则加载；为假时，则不加载。

用处：用在权限管理，页面条件加载

语法：v-if=”判断表达式”

特点：控制元素插进来或者删除，而不是隐藏。

v-if与v-show的区别：

一般来说，v-if有更高的切换消耗，安全性更高，而v-show有更多的初始化渲染消耗。因此，如果需要频繁切换而对安全性无要求，使用v-show。如果在运行时，条件不可能改变，则使用v-if较好。

2.6.6 v-else

v-else必须紧跟在v-if后面，否则他不能被识别。表示：当v-if的条件不成立的时候执行。

2.6.7 v-for

作用：控制html元素中的循环，实现诗句列表的生成。

用法：

view:

v-for=”item in 集合”

item: 集合的子项

集合：被遍历的集合，通常为数组。

用处：写在谁上，谁循环。

数据：

2.6.8 v-on

作用：对页面中的事件进行绑定

语法： v-on:事件类型=“事件处理函数名”

缩写： @事件类型=“事件处理函数名”

用法：

在view中，用v-on:事件类型=”methods中的方法名字”

在vue实例中，在methods中去监听：也就书写methods的该方法。

2.6.9 v-model 双向数据绑定

作用：接受用户输入的一些数据，直接就可以将这些数据挂在到data属性上。这样就产生了双向的数据绑定（当业务模型中的数据发生变化时，用户界面中的数据会发生变化；当用户界面中的数据变化时，业务模型中的数据也会发生变化）。

语法：v-model = “data中的键名”

在data中，最好也要定义这个属性，不然会报错。

例如：

<input type="text" v-model="title">data () {return {title: '测试'}}

2.7 vue的生命周期

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

Vue 实例生命周期

创建前/后 （beforeCreated/created）： 在beforeCreated阶段，vue实例的挂载元素 e l 和 数 据 对 象 d a t a 都 为 u n d e f i n e d ， 还 未 初 始 化 。 在 c r e a t e d 阶 段 ， v u e 实 例 的 数 据 对 象 d a t a 有 了 ， el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了， el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

载入前/后（beforeMount/mounted）：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后（beforeUpdate/updated）：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后（beforeDestory/destroyed）：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

2.8 计算属性和监听属性

计算属性：依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

监听属性：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。通常更好的做法是使用计算属性而不是命令式的 watch 回调

computed和watch比较：

<div id="demo">{{ fullName }}</div>watch:data() {return{firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'}},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}

fullName属性依赖于firstName和lastName，这里有个缺点就是，无论firstName或lastName其中的任何一个发生改变时，都要调用不同的监听函数来更新fullName属性。但是当我们使用计算属性时，代码就会变得更加简洁。

computed:data(){return{firstName: 'Foo',lastName: 'Bar'}},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}

相同点：

首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。

不同点：

watch和computed各自处理的数据关系场景不同

(1) watch擅长处理的场景：一个数据影响多个数据。适合监控场景，某【一个】变量改变时需要做什么操作；类似于onchange，适合耗时操作，如网络请求等。

(2) computed擅长处理的场景：一个数据受多个数据影响。某【一些】变量发生变化时，影响的【单个】结果对应地发生改变。

2.9 vue父子组件之间传值

参考文章：vue中的组件以及父子组件间通信传值

3.vue router

参照官方文档：VUE Router

Vue路由（Vue-Router）

控制页面的局部跳转刷新，相当于MVC框架中的controller中的定义的@requestMapping注解配置跳转页面

路由配置文件在项目中的src目录下

4.vuex

参照官方文档：VUEX

参考文章：VueJS中学习使用Vuex详解

5.ElementUI

参照官方文档：ElementUI中文官方文档

项目集成

第一步引入依赖

第二步-main函数引入

使用方法同layui，使用比layui厉害

常用的组件总结：

<el-input> 标签相当于input框；<el-radio>标签相当于radio框；<el-chekbox>标签相当于chekbox框；<el-upload>标签相当于file上传文件；<el-form>定义表单，<el-form-item>定义表单中的项；<el-table></el-table>定义表格相当于table，<el-table-column>定义一行，相当于<td>，可以绑定数据，动态显示表格总的来说，就是将原有的html标签封装了一遍，使用方法大同小异。例如：点击事件的定义不同

表单实例代码

表单效果

（作者：MysticBoy

链接：参考链接

来源：简书）