从0搭建一个Springboot+vue前后端分离项目(三)使用idea进行页面搭建+Element框架

因为搭建一个后台管理系统,如果要手写CSS样式很繁琐,这里使用ELement框架

安装Element

npm install element-plus --save

引入Element

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

测试是否引入成功

引入成功

引入下拉框

<el-dropdown><span class="el-dropdown-link">Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item>Action 1</el-dropdown-item><el-dropdown-item>Action 2</el-dropdown-item><el-dropdown-item>Action 3</el-dropdown-item><el-dropdown-item disabled>Action 4</el-dropdown-item><el-dropdown-item divided>Action 5</el-dropdown-item></el-dropdown-menu></template></el-dropdown>

按需修改格式

<template><div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex"><div style="width: 200px; padding-left: 30px;font-weight: bold; color: dodgerblue">后台管理</div><div style="flex: 1"></div><div style="width: 100px"><el-dropdown><span class="el-dropdown-link">张三<el-icon class="el-icon--right"><arrow-down/></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>推出系统</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div>
</template><script>
export default {name: "Header"
}
</script><style scoped></style>

从0搭建一个Springboot+vue前后端分离项目(三)使用idea进行页面搭建+Element框架相关推荐

从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建
把(一)里面创建好的项目文件夹拖入到IDEA里面进行完上步操作后就可以快捷的启动项目了这里稍微修改一下可以让我们启动项目后,自动地打开页面页面搭建和改造对此项目文件进行改造,改造成最终我们需要 ...
从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
从0搭建一个Springboot+vue前后端分离项目(四)利用Element框架搭建页面主体部分表格与侧边栏
https://element-plus.gitee.io/zh-CN/component/menu.html 导航栏部分选定menu菜单,选择竖型样式的复制一下 <el-menudefau ...
从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口
将之前前端写的表格内容,与数据库新建的表进行对应启动项目把写死的TableDa数据删掉.因为最终要从后台读取完善新增接口 <el-button type="primary&quo ...
从0搭建一个Springboot+vue前后端分离项目(五)创建后台Springboot工程
前往Springboot官网 https://start.spring.io/ 选择版本和依赖 SpringWeb: 可以实现接口的开发; MysqlDriver:连接数据库; Lombok简化jav ...
从0搭建一个Springboot+vue前后端分离项目(八)把数据从后台传到前端进行展示渲染,完善增删改查
首先引入hutool工具类 Hutool是一个Java工具包类库,对文件.流.加密解密.转码.正则.线程.XML等JDK方法进行封装,组成各种Util工具类 Hutool是一个小而全的Java工具类库 ...
从0搭建一个Springboot+vue前后端分离项目(六)后台编写配置类与接口
新建一个包,里面放入一些常用的配置类引入mybatis-plus包与插件引入包前往官网查看 https://baomidou.com/pages/226c21/#%E5%88%9D%E5%A7% ...
阿里服务器部署springboot+vue前后端分离项目
服务器部署springboot+vue前后端分离项目最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...
超详细！4小时开发一个SpringBoot+vue前后端分离博客项目！！
小Hub领读: 前后端分离的博客项目终于出来啦,真是花了好多心思录制咧.文末直接进入B站看视频哈! 作者:吕一明项目代码:https://github.com/MarkerHub/vueblog 项 ...

从0搭建一个Springboot+vue前后端分离项目(三)使用idea进行页面搭建+Element框架

安装Element

引入Element

引入下拉框

从0搭建一个Springboot+vue前后端分离项目(三)使用idea进行页面搭建+Element框架相关推荐

最新文章

热门文章