①安装node.js，下载相应版本的node.js,下载地址：https://nodejs.org/en/download/，下载完双击安装，点击下一步直到安装完成
②安装完成后，附件里选择命令提示符（或者在开始的搜索框里输入cmd回车调出命令面板）输入：node -v回车，出现相应版本证明安装成功，　node环境已经安装完成，由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的　国内镜像---cnpm。在命令行中输入：npm install -g cnpm –registry=https://registry.npm.taobao.org回车，大约需要3分钟，　如果报错或没反应，则卸掉node.js重新安装
③安装全局vue-cli脚手架，用于帮助搭建所需的模板框架。输入命令：cnpm install -g vue-cli回车等待完成。
④创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录，假如我们打算把项目新建在e盘下的vue文件夹中则输入下面的命令：　e:回车，然后cd vue，然后输入命令：vue init webpack 项目文件夹名称，回车，运行初始化命令的时候会让用户输入几个基本的选项，　如项目名称，描述，作者等信息，如果不想填直接回车默认就好。(一顿回车+N键就完成了)
⑤安装项目所需的依赖包，首先输入：cd 项目名回车，然后输入：cnpm install回车等待安装，安装完成之后，会在我们的项目目录firstVue　文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。安装完依赖包之后，就可以运行整个项目了。
⑥测试环境是否搭建成功，在cmd里输入：cnpm run dev回车，项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开　，可以手动输入）。运行成功后，会看到Welcome to Your Vue.js App页面。

CREATE TABLE persons (id  integer, create_datetime datetime, email varchar(255), phone varchar(255), sex varchar(255), username varchar(255), zone blob, primary key (id));

INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'gubaoer@hotmail.com', 08613000001111, 'male', 'gubaoer', 'HongKou District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'boyle.gu@hotmail.com', 08613000001112, 'male', 'baoer.gu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'yoyo.wu@gmail.com', 08613000001113, 'female', 'yoyo.wu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'stacy.gao@126.com', 08613000001114, 'female', 'stacy.gao', 'MinHang District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'yomiko.zhu@qq.com', 08613000001115, 'female', 'yomiko.zhu', 'PuDong District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'hong.zhu@163.com', 08613000001116, 'male', 'hong.zhu', 'YangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'leon.lai@qq.com', 08613000001117, 'male', 'leon.lai', 'JinShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'mark.lei@sohu.com', 08613000001118, 'male', 'mark.lei', 'HuangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'wen.liu@360.com', 08613000001119, 'male', 'wen.liu', 'ChongMing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'cai.lu@baidu.com', 08613000001120, 'female', 'cai.lu', 'BaoShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'alex.li@icee.com', 08613000001121, 'male', 'alex.li', 'ChangNing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'sofia.xu@qq.com', 08613000001122, 'female', 'sofia.xu', 'ZhaBei District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'cora.zhang@qq.com', 08613000001123, 'female', 'cora.zhang', 'XuHui District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'tom.gao@hotmail.com', 08613000001124, 'female', 'tom.gao', 'HuangPu District');

<template><div class="wrapper"><db-header></db-header><el-row class="container"><el-col :span="4" class="menu"><db-sidebar></db-sidebar></el-col><el-col :span="20" class="content"><db-filterinput></db-filterinput><db-table></db-table></el-col></el-row><el-row><el-col :span="24"><footer class="footer"><db-footer></db-footer></footer></el-col></el-row></div>
</template>
<script>　　/*此处命名必须按照驼峰命名法，并且引入也需要遵守规则*/import DbHeader  from './components/DbHeader.vue'import DbSidebar from './components/DbSidebar.vue'import DbFilterinput from './components/DbFilterinput.vue'import DbTable from './components/DbTable.vue'import DbFooter from './components/DbFooter.vue'import ElRow from "element-ui/packages/row/src/row";export default {name: 'app',components: {ElRow, DbHeader,DbSidebar,DbFilterinput,DbTable,DbFooter},}
</script>
<style>element.style {background-color: rgb(10, 47, 88);}body {font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;margin: 0;display: flex;min-height: 100vh;flex-direction: column;}.el-menu, body, html {height: 100%;}.wrapper {position: relative;}footer, div {display: block;}.container {padding-top: 70px;flex: 1;}.container, .wrapper {height: 100%;}.menu {height: 100%;background-color: #eef1f6;}.content {padding-top: 25px;padding-right: 25px;padding-bottom: 125px;padding-left: 25px;}.footer {height: 120px;background-color: #324057;color: #a4aebd;width: 100%;z-index: 1000;margin-top: -120px;line-height: 1;font-size: 22px;}</style>

/**
* Created by wlovet on 18/1/17
*/
import Vue from 'vue'
import{Button,Select,Row,Col,Pagination,Table,TableColumn,Form,FormItem,Input,Dialog,Option
}from 'element-ui'
//导入App.vue页面入口组件
import App from './App.vue'
//Element-UI使用指南 Element-UI是饿了么前端团队
//推出的一款基于Vue.js 2.0 的桌面端UI框架,
//手机端有对应框架是 Mint UI
import 'element-ui/lib/theme-default/index.css'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale' // 导入更多的第三方库的组件
//Moment.js 是一个 JavaScript 日期处理类库
//,用于解析、检验、操作、以及显示日期
import moment from 'moment'
//Vue2.0的网络请求库
import axios from 'axios'
//curvejs 中文读["克js"],是腾讯AlloyTeam
//打造的一款魔幻线条框架,
//让线条成为一名优秀的舞者,
//让线条们成为优秀的舞团,HTML5 Canvas就是舞台。
import curvejs from 'curvejs'//Object.defineProperty 是vue中双向绑定的基础。
//vue是通过数据劫持的方式来做数据绑定的，
//最核心的方法是通过 Object.defineProperty()
//方法来实现对属性的劫持，达到能监听到数据的变动。
Object.defineProperty(Vue.prototype, '$moment', { value: moment });
Object.defineProperty(Vue.prototype, '$axios', { value: axios });
Object.defineProperty(Vue.prototype, '$curvejs', { value: curvejs });//引入Element-UI组件的步骤
Vue.use(Button);
Vue.use(Select);
Vue.use(Row);
Vue.use(Col);
Vue.use(Pagination);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
Vue.use(Dialog);
Vue.use(Option);new Vue({el:'#app',render:h=>h(App)
})

//作为vue组件之间信息交流的通道
import Vue from 'vue'
const Bus = new Vue();
export default Bus

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.sunyard</groupId><artifactId>SpringBoot-MVVM-Vue</artifactId><version>0.0.1-SNAPSHOT</version><packaging>war</packaging><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.6.RELEASE</version><relativePath /> <!-- lookup parent from repository --></parent><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>1.2.0</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>Dalston.SR3</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>
</project>

spring.application.name=springboot-mvvm-vue
server.port=8088
spring.datasource.url=jdbc:mysql://localhost:3306/springboot-mvvm-vue2
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.driver-class-name=com.mysql.jdbc.Driver#扫描项目中的pojo类
mybatis.typeAliasesPackage=com.mycom.pojo#扫描mapper包下的xml文件
mybatis.mapperLocations=classpath\:com/mycom/mapper/*.xml

package com.mycom;import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;@SpringBootApplication
//扫描dao包下的dao接口
@MapperScan("com.mycom.dao")
//扫描config包下的CORSConfig类，用来解决axios的跨域请求问题
@Configuration
public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}
}

package com.mycom.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;import static org.springframework.web.cors.CorsConfiguration.ALL;/*** CORS configuration*/
@Configuration
public class CORSConfig {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurerAdapter() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins(ALL).allowedMethods(ALL).allowedHeaders(ALL).allowCredentials(true);}};}}