npm install -g @vue/cli 全局安装
创建项目命令行创建：vue create <ProjectName>
图形界面创建： vue ui 可进行安装插件的修改
Idea编译器配置Add Configuration中选择package.json并添加npm run
在package.json中的scripts中的serve中添加--open后，运行自动打开页面
2.项目编码 下载与引入ElementPlus
终端下载：npm install element-plus --save
页面引入：在main.js中根据官网代码引入
vue引入components export default{name:"Layout",components:{Header,Aside}} 设置合适的长度 min-height:calc(100vh-50px) 页面架构App.vue总体结构中规定主体内容区 views文件夹中Home.vue etc.
3.后台搭建
start.spring.io 可视化创建 jdk8
添加依赖： Web+MySQL Driver+Lombok
工程中右键创建maven，下一步创建<name>文件夹的maven工程，并将demo.zip文件夹中的src和pom复制到此文件夹中
后台配置启动端口springboot——src——resources——application.properties
server.port=9090spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.datasource.url=jdbc:mysql://localhost:3306/springboot-vue?useUnicode=truespring.datasource.username=rootspring.datasource.password=rootroot4.后台架构 文件夹名称作用common插件配置controller接口 对数据库的操作 前后台数据交互entity实体类mapperinterface·common文件夹
分页插件
安装依赖
com.example.demo-common-MybatisPlusConfig
Mybatis核心功能-分页插件 见官网
结果插件
Result是返回给前台的一个包装类，后台返回给前台一般是一个json。code成功or失败，json定义为T范型，任何数据类型都可以用。
·controller文件夹一般是controller中引入service，service中引入mapper
·entity文件夹 ·mapper文件夹5.前后台数据交互 axios数据交互封装 cd vuenpm install axios -S
vue - src - utils - request.js 工具类封装
import axios from 'axios'const request = axios.create({ timeout: 5000})// request 拦截器// 可以自请求发送前对请求做一些处理// 比如统一加token，对请求参数统一加密request.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json;charset=utf-8'; // config.headers['token'] = user.token; // 设置请求头 return config}, error => { return Promise.reject(error)});// response 拦截器// 可以在接口响应后统一处理结果request.interceptors.response.use( response => { let res = response.data; // 如果是返回的文件 if (response.config.responseType === 'blob') { return res } // 兼容服务端返回的字符串数据 if (typeof res === 'string') { res = res ? JSON.parse(res) : res } return res; }, error => { console.log('err' + error) // for debug return Promise.reject(error) })export default request 跨域请求8080->9090 前段->后台
vue->vue.config.js
module.exports={ devServer:{ port:9876,//前段端口改为了9876 proxy:{ '/api':{ target:'http://localhost:9090',//目标访问到9090 changeOrigin:true, pathRewrite:{ '/api':'' } } } }}