SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--搭建Vue 前端工程[二]

SSM–搭建Vue 前端工程–项目基础界面

实现功能02-创建项目基础界面

需求分析

效果图

思路分析

使用Vue3+ElementPlus 完成。

代码实现

1. 修改ssm_vue\src\App.vue 成如下形式, 会删除部分用不上的代码，增加

2. 修改ssm_vue\src\views\HomeView.vue ,

3. 删除ssm_vue\src\components\HelloWorld.vue
4. 创建ssm_vue\src\components\Header.vue

5. 修改ssm_vue\src\App.vue , 引入Header 组件

6. 创建全局的global.css(先准备着, 后面有用) , 以后有全局样式就可以写在这里,ssm_vue\src\assets\css\global.css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

7. 修改ssm_vue\src\main.js , 引入global.css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/css/global.css'
createApp(App).use(store).use(router).mount('#app')

8. 修改ssm_vue\src\main.js, 引入Element Plus , 并测试, 如何引入， 文档https://element-plus.gitee.io/zh-CN/guide/quickstart.html

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/css/global.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

9. 修改ssm_vue\src\App.vue , 引入一个el-button, 看看是否生效

10. 修改ssm_vue\src\components\Header.vue , 引入下拉框, 文档https://doc-archive.element-plus.org/#/zh-CN/component/dropdown 【是旧版对应的文档】

-----运行效果—

11. 创建侧边栏组件, 并引入导航菜单组件ssm_vue\src\components\Aside.vue , 参考文档https://doc-archive.element-plus.org/#/zh-CN/component/menu

粘贴的代码要注意:

12. 修改ssm_vue\src\App.vue, 将页面分成三个部分

13. 修改ssm_vue\src\views\HomeView.vue, 加入一个el-button,进行测试

14. 看看主页面的效果, 基本结构已经出来了

15. 对主页面进行一个完善， 比如导航栏的宽度， 去掉不必要的子菜单等, 修改ssm_vue\src\components\Aside.vue

对主页面进行一个完善， 比如导航栏的宽度，去掉不必要的子菜单等, 修改SSM-Vue 整合项目Aside.vue

注意

先去掉, 这两个方法, 否则会报错。
@open=“handleOpen”。
@close=“handleClose”。

16. 修改ssm_vue\src\views\HomeView.vue , 引入表格,后面来显示数据, 参考文档

17. 可以看到， element-plus 默认是英文的, 我们将其国际化一下
    https://doc-archive.element-plus.org/#/zh-CN/component/i18n , 修改ssm_vue\src\main.js

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/css/global.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
createApp(App).use(store).use(router).use(ElementPlus,{locale: zhCn,}).mount('#app')

------看效果------

18. 修改ssm_vue\src\views\HomeView.vue, 从官网设置一些测试数据, 并支持日期排序

19. 修改ssm_vue\src\views\HomeView.vue, 增加相关的操作按钮和搜索框, 参考el-input
    组件文档, 表格的固定列文档

项目前后端分离情况

项目前后端分离情况如图

注意事项和细节

1、flex: 1 布局说明
https://www.cnblogs.com/LangZ-/p/12703858.html
2、box-sizing: border-box
box-sizing: border-box 就是将border 和padding 数值包含在width 和height 之内，这样的好处就是修改border 和padding 数值盒子的大小不变
https://blog.csdn.net/qq_26780317/article/details/80736514
3、引入Element-Plus , 启动可能出现的问题和解决方案