前后端分离-小项目-1前端布局
技术栈
前后端分离开发，前端主体框架Vue3+后端基础框架Spring-Boot
1.前端技术栈：Vue3+Axios+ElementPlus
2.后端技术栈：Spring Boot+MyBatis Plus
3.数据库-MySQL
4.项目的依赖管理-Maven
5.分页-MyBatis Plus的分页插件
环境搭建
安装Node.js LTS
node.js的npm,用于管理前端项目包依赖
cmd->node -v查看版本号，以检测是否安装。/如果没有安装，就查看以前的安装过程
创建Vue项目
新建一个保存前端页面的文件夹，然后在该文件夹地址栏cmd->vue create springboot_vue
选择
>Manually select features
空格键选中*
*babel 默认勾选
*Router勾选
*Vuex 勾选
Linter / Formatter(默认，取消该选择) 要求严谨，不能有错，对新手不友善
选择>vue3的项目
history model?y
placing config?包的管理方式>In package.json
保存当前预设给将来使用preset?y
保存预设命名为as：springboot_vue_stein
整个过程注意保持网络畅通。如果出现问题，重新走一遍。
完成后执行提示的两个语句。先cd，在npm
然后按提示地址能够访问页面便成功了。
使用idea打开springboot._vue项目，并配置项目启动
1)直接将springboot._vue项目拖到idea
2)配置springboot_vue使用npm方式启动
点开组件栏的“启动框”选择Edit Configurations...
左上角“+”号，找到npm
右边窗口：Scripts:serve。然后Apply、Ok
我们会使用到element-plus,停止项目，安装element-plus插件
element-plus官方文档--https://element-plus.gitee.io/#/zh-CN/component/layout,指南->安装，找到下面这个安装指令。在该项目下执行安装指令。
安装包管理器
# NPM
$ npm install element-plus --save配置Vue服务端口
在vue.config.js里面配置端口号。重新运行npm即可
module.exports = {devServer: {port: 10000}
}创建基础页面
目标：使用Vue3+ElementPlus完成该界面
实现过程：
清除不用内容和组件
清空App.vue
清理HomeView
删除HelloWorld.vue，
创建Header.vue
创建全局global.css，以备后用
在main.js引入global.css
Element-Plus的使用
引入Element-Plus
可以参考文档，实际不重复的部分如下。main.js修改
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
.use(ElementPlus)App.vue。添加按钮，测试是否能正常使用。
<template><Header/>Home<el-button>我的按钮</el-button> #添加了该行
</template>增加右上角个人设置。Header.vue里面添加
<el-dropdown>伪代码：该部分中间的内容。参看文档</el-dropdown>左侧边栏，新建组件Aside.vue。参见Menu菜单->侧栏
<el-menu>标签内的代码固定宽度，避免打开/关闭导航栏，引起来回缩进
<el-menu style="width:200px">App.vue三分页面。头左右。需要引入前面写好的Aside
<template><div><!--头--><Header/><div style="display: flex"><!--左侧边栏--><Aside/><!--右侧显示内容--><router-view style="flex:1"/></div></div>
</template>测试右侧展示页面HomeView.vue
HomeView添加el-button即可查看
<el-button>测试按钮</el-button>HomeView.vue引入表格内容
引入表格元素
sortable 加入可排序属性
<el-table:data="tableData"style="width: 100%"><el-table-column prop="date" sortable label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>关联数据。注意数据的格式。data(){return{keyword:[ ]
export default {
//新增内容：添加数据池。注意格式
,data(){return{tableData:[{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]}}
}国际化。参看文档->指南->国际化
添加引入，修改使用，注意合并重复的语句。然后页面可以看到中文提示
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'app.use(ElementPlus, {locale: zhCn,
})添加固定列表格
自定义内容需要使用该行数据时，声明#default="scope'",再通过scope.row获取数据。
插槽机制。可以拿到其他行的数据来进行修改
<el-table-column fixed="right" label="操作" width="120"><template #default="scope"><el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button><el-button link type="primary" size="small">删除</el-button></template></el-table-column>编写handleEdit（）方法
待完善
添加新增、其他按键
<div style="margin:5px 2px"><el-button type="primary">新增</el-button><el-button>其他</el-button></div>添加搜索栏
<div style="margin-left: 2px"><el-input v-model="input" style="width:260px" placeholder="请输入关键字"/><el-button style="margin-left: 5px" type="primary">查询</el-button></div>