因?yàn)榇罱ㄒ粋€(gè)后臺(tái)管理系統(tǒng),如果要手寫(xiě)CSS樣式很繁瑣,這里使用ELement框架

安裝Element

npm install element-plus --save

引入Element

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

測(cè)試是否引入成功

引入成功

引入下拉框

<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">后臺(tái)管理</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>個(gè)人信息</el-dropdown-item><el-dropdown-item>推出系統(tǒng)</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div> </template><script> export default {name: "Header" } </script><style scoped></style>

總結(jié)

以上是生活随笔為你收集整理的从0搭建一个Springboot+vue前后端分离项目(三)使用idea进行页面搭建+Element框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。