前端框架：Vue，相关网址：https://cn.vuejs.org/v2/guide/
UI框架：Element，相关网址：https://element.faas.ele.me/#/zh-CN/component/installation
后端框架：SpringBoot+Mybatis（数据库框架）+Redis（缓存数据库框架）
数据库：MySql
目标：前后端数据打通。
搭建步骤：
一、搭建Vue脚手架（vue-cli）
1、查看Node.js和npm是否安装。（没有安装就安装一下）
（1）查看版本命令：node -v，npm -v。
（2）安装Node.js，npm是随同Node.js一起安装的包管理工具。（Node.js安装包下载地址：https://nodejs.org/en/，安装步骤网上搜）
2、使用npm全局安装webpack。
（1）输入命令行：npm install -g webpack（或者npm install webpack -g）。
（2）安装完成之后，输入命令行：webpack -v，查看版本。
（3）注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ，所以使用这条命令：npm install webpack webpack-cli -g。
3、使用npm全局安装vue-cli。
（1）输入命令行：npm install --global vue-cli。
（2）安装完成之后，输入命令行：vue -V，查看版本。（注意是大写V）
二、用vue-cli来构建项目
1、创建项目文件夹，并且通过命令行cd到该项目目录下。
（1）初始化wepack，输入命令行：vue init webpack vuetest1。（注意cd到创建项目的目录下）
（2）初始化完成后，输入命令行：cd vuetest1，然后运行任务，输入命令行：npm run dev。
（3）需要结束的时候，任务结束命令：ctrl+c，然后选择y即可。
浏览器输入：http://localhost:8080，出现下图则为成功！
2、去相应的目录下查看构建的Vue项目文件，然后用vscode之类的前端开发工具打开。
各个文件目录说明如下：
build：项目构建（webpack）相关代码。
config：项目的配置目录，包括端口号等。
node_modules：npm夹杂的项目依赖块。
src：主要开发用目录。包括以下目录：
（1）assets：放置图片等。
（2）components：组件目录。即是我们的开发目录。
（3）router：路由配置。
（4）App.vue：项目入口。
（5）main.js：项目核心文件。
static：放置一些静态资源文件。
test：测试用。（可删除）
.babelrc，.editorconfig，.gitignore：这三个是语法，git的配置。
.postcssrc.js：添加浏览器私缀。
index.html：首页入口文件。
package-lock.json，package.json：这两个json是配置依赖：前者锁定小版本，后者锁定大版本。
README.md：项目说明文档。
3、创建一个测试test.vue。
（1）在components目录下创建test文件夹，然后创建文件test.vue，代码如下：
（2）在router目录下的index.js添加如下test的路由，代码如下：
（3）在浏览器地址栏输入：http://localhost:8070/#/test，查看运行效果。（端口号可以在config目录下的index.js中修改）
3、使用UI框架Element编写前端界面。（详情可查看Element官方文档）
（1）安装ElementUI，在项目目录下运行命令：npm install element-ui -S。
（2）引入Element，在main.js下写入以下内容：
（3）在test.vue中添加一个输入框。效果如下：
至此，前端编写流程已完成。接下来，该获取接口数据并渲染UI。
三、使用SpringBoot+MySql+MyBatis+Redis框架来编写后台数据接口。
具体步骤可参考其他文档比如创建接口如下：
四、前后台数据对接。
目前请求数据的方式主要有两种：fetch和axios。无论哪种方式，都需要先配置proxyTable，解决浏览器跨域问题。
1、解决浏览器跨域问题。在config目录下的index.js文件中添加如下代码：
proxyTable: {
'/api': {
target:"http://127.0.0.1:8090/",
chunkOrigins: true,// 允许跨域
pathRewrite:{
'^/api': '' // 路径重写，使用"/api"代替target.
}
}
},
（注意：配置完成后，请重启node服务，才会生效。）
2、使用axios或者fetch请求数据。
（1）axios方式
说明文档地址：https://www.kancloud.cn/yunye/axios/234845
A.安装一下axios，命令如下：npm install axios。
B.引入axios并做相关赋值，在main.js中添加如下代码：
C.使用axios方式请求数据，test.vue添加如下代码：
D.刷新浏览器，效果如下：
（2）fetch方式
说明文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
// fetch实现跨域
created() {
fetch('/api/hellotest',{
method:'post',//请求的方式
headers:{
'Content-type':'application/json',
},
})
.then(result=>{console.log(result)})
.then(data =>{
//打印数据
console.log(data);
})
}至此，前后端数据对接已完成！
