ElementUI01

一、前后端分离

在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。

优点：

(1) 专业的人做专业的事情
(2) 提高开发效率 --并行开发
(3) 应对复杂多变的需求
(4) 提高维护性

缺点：成本高 有钱人做的

搭建vue脚手架

二、ElementUI-基于vue前端ui框架

使用：

（1）安装

npm i element-ui -S，也可以下载下来导入使用，和easyui差不多

（2）导入：

在main.js中写入一下内容:
import Vue from ‘vue’;
import ElementUI from ‘element-ui’; //引入核心js组件
import ‘element-ui/lib/theme-chalk/index.css’;//引入依赖的样式
Vue.use(ElementUI)
（3）在router.js中添加路由元素看，供外部访问
然后在官网拷入需要的组件到component下的组件里

import HelloWorld from "./components/HelloWorld"
import HelloElementUI from "./components/_01_helloElementUI"

let routes =  [
    //以后再添加组件，只需要在路由数组中添加一个元素即可
    {
        path:"/",
        component:HelloWorld
    },
    {
        path:"/_01_helloElementUI",
        component:HelloElementUI
    }
];
export default routes;

//component下的组件
01_helloElement.vue
<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>

</template>

常用组件

layout
container
button
tree
alert
tabs
dialog
form
table
message

axios请求

vue更新到2.0之后，官方推荐使用axios请求服务器数据。Axios和其他的ajax库都很类似，他是基于promise的http库，可以用在浏览器和node.js中

安装：npm install axios --save

easyMock和mockjs

模拟数据生成器，旨在帮助前端攻城师独立
于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
1、根据数据模板生成模拟数据
2、模拟 Ajax 请求，生成并返回模拟数据
3、基于 HTML 模板生成模拟数据