河南省住房与城乡建设部网站,品牌建设不足的原因,phpcms 网站转移,域名备案网站建设书模板目录 一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下) 二、Vue3集成Element-Plus详细教程。(博客链接如下) 三、Vue3集成Vue-Router详细教程。(博客链接如下) 四、Vue3快速搭建后台管理系统。(实战学习) #xff08… 目录 一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下) 二、Vue3集成Element-Plus详细教程。(博客链接如下) 三、Vue3集成Vue-Router详细教程。(博客链接如下) 四、Vue3快速搭建后台管理系统。(实战学习) 1后台管理系统框架设计。 1网页头部分。 2左部分侧边导航菜单栏。 3右部分内容的主体设计。 4后台管理系统框架整体布局设计图示。 2父级页面布局设计与实现。 1页面头部以下部分实现。 左侧导航栏设计与高度巧妙设定。(element-plus菜单Menu) 右侧主体区域数据展示区设计。 自定义—element-plus的卡片(card)样式。 右侧主体区域设计代码示例。 2多级菜单项的配置与实现。 官方示例渲染效果。 配置导航菜单项间的路由跳转。(router) 解决刷新页面后—高亮显示当前路由菜单。(defalut-active) 设置css样式——选中某个菜单项的整体背景与文字都高亮显示。 3页面头部的渲染实现。 中间布局分隔。styleflex:1 头部右部分。头像、用户名实现 优化导航栏的菜单项显示。 设置多级菜单项默认展开子菜单。(default-openeds) 头部左部分。(标题、logo实现) 一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下) Vue3实战学习Vue环境配置、快速上手及卸载Node.js、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像(1)_vue淘宝镜像-CSDN博客Vue3实战学习IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程(2)_vue在idea打开-CSDN博客Vue3实战学习Vue3的基础语法学习与使用(超详细)(3)_vue3 {... }-CSDN博客Vue3实战学习Vue3集成Element-Plus(常用依赖、插件安装与导入 。按钮、图标组件。自定义主题的实现)(超详细)(4)_vue3安装依赖-CSDN博客 二、Vue3集成Element-Plus详细教程。(博客链接如下) Vue3实战学习Element-Plus常用组件的使用(输入框、下拉框、单选框多选框、el-image图片)(上)(5)_el-input textarea clearable-CSDN博客Vue3实战学习Element-Plus常用组件的使用(轮播图、日期时间选择器、表格、分页组件、对话框)(超详细)(下)(6)-CSDN博客 三、Vue3集成Vue-Router详细教程。(博客链接如下) Vue3实战学习Vue3集成Vue-Router(路由跳转、编程式路由跳转。路由跳转的单参数、多参数传递。设置默认页面路由)(上)(7)-CSDN博客Vue3实战学习Vue3集成Vue-Router(嵌套路由、路由守卫、404NotFound页面设计与路由配置)(下)(8)-CSDN博客 四、Vue3快速搭建后台管理系统。(实战学习)
独自学会使用Vue3搭建后台管理系统的基本框架。(网页整体框架的渲染与内容设计、布局)
1后台管理系统框架设计。 整个管理系统框架分为“网页头部分”、“侧边菜单栏(导航栏)”、“主体区域内容”3个部分。 1网页头部分。 头部分的左边分别为网页标题、logo设计。头部分的右边分为用户头像(文件上传模块)、用户名。 2左部分侧边导航菜单栏。 鼠标点击——切换每一个导航菜单——到达不同的数据页面。 3右部分内容的主体设计。 右部分作为数据展示区域。(Echarts图表、公告、网页信息、数据信息表格、表单等) 4后台管理系统框架整体布局设计图示。 2父级页面布局设计与实现。 父级页面Manager.vue页面。采用嵌套路由实现父、子页面的渲染。 import { createRouter, createWebHistory } from vue-routerconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path:/,redirect:/manager/home},{path:/manager,meta:{ title:父级页面},component: () import(../views/Manager.vue),children:[{path: home, name: home, meta:{ title:主页}, component: () import(../views/Home.vue)}, // url:/manager/home{path: test, name: test, meta:{ title:测试数据页01}, component: () import(../views/Test.vue)}, // url:/manager/test{path: demo, name: demo, meta:{ title:测试数据页02}, component: () import(../views/Demo.vue)}, // url:/manager/demo{path: data, name: data, meta:{ title:数据展示页面}, component: () import(../views/Data.vue)}, // url:/manager/data]},{path: /404, name: NotFound, meta:{ title:404找不到页面}, component: () import(../views/404.vue)},{path:/:pathMatch(.*),redirect:/404}],
})router.beforeEach((to,from,next){//设置即将跳转的路由页面的网页标题document.titleto.meta.titlenext() //必须调用的方法
})export default router 1页面头部以下部分实现。 左侧导航栏设计与高度巧妙设定。(element-plus菜单Menu) 官方文档。 设置官方给的标签el-menu自带的border为0。因为不好看且最小视窗高度没有设定。 所以需要自己手动使用min-height进行设定。这样就让它根据内容进行填充border。 代码示例。 template
!-- 页面头部开始 --div styleheight: 50px;background-color: #2597e8/div
!-- 页面头部结束 --!-- 页面下面部分开始 --
!-- flex布局分为左右两边 --div styledisplay: flex!-- 侧边导航栏开始 --div stylewidth: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px) el-menu styleborder: 0
!-- 菜单项 --el-menu-item系统首页/el-menu-itemel-menu-item数据统计/el-menu-item/el-menu/div!-- 侧边导航栏结束 --!-- 右侧主体区域开始 --!-- 右侧设置自适应宽度 --!-- flex是一个 CSS弹性盒布局属性的简写形式flex: 1 等同于 flex: 1 1 0%。当父容器有剩余空间时该元素可以按照比例进行扩展这里是占据所有剩余空间 --div styleflex: 1;width: 0;background-color: #edf3f9;padding: 10pxRouterView//div!-- 右侧主体区域结束 --/div
!-- 页面下面部分结束 --/templatescript setup/script页面渲染效果。 右侧主体区域数据展示区设计。 通过RouterView/将嵌套子路由页面渲染出来。 !-- 右侧主体区域开始 --!-- 右侧设置自适应宽度 --!-- flex是一个 CSS弹性盒布局属性的简写形式flex: 1 等同于 flex: 1 1 0%。当父容器有剩余空间时该元素可以按照比例进行扩展这里是占据所有剩余空间 --div styleflex: 1;width: 0;background-color: #edf3f9;padding: 10pxRouterView//div
!-- 右侧主体区域结束 -- 设置新页面路由。 自定义—element-plus的卡片(card)样式。 官方文档。 自定义的卡片(card)样式配置到全局样式中(global.css)。css样式代码示例。 body{margin: 0;padding: 0;font-size: 16px;color: #333;
}/*自定义卡片样式*/
.card{/*背景*/background-color: white;/*内边距*/padding: 10px;/*圆边角设定*/border-radius: 4px;/*设置阴影效果*/box-shadow: 0 0 12px rgba(0,0,0,0.12) ;
} 应用卡片样式后的简单代码示例。 templatedivdiv classcardel-input stylewidth: 240px v-modeldata.name placeholder请根据名称查询 :prefix-iconSearch/el-input/div/div
/templatescript setup
import {reactive} from vue;
import {Search} from element-plus/icons-vue;const data reactive({name:,})/scriptstyle scoped/style 加入卡片样式后的页面渲染效果。 右侧主体区域设计代码示例。 注意到这里都只是前端页面的渲染效果。关于前后端的数据交换实现数据库的增删改查后才能完成真正的按钮功能、分页查询效果。 templatedivdiv classcard stylemargin-bottom: 5pxel-input stylewidth: 240px v-modeldata.name placeholder请根据名称查询 :prefix-iconSearch/el-inputel-button typeprimary stylemargin-left: 10px查 询/el-buttonel-button typewarning stylemargin-left: 10px重 置/el-button/divdiv classcard stylemargin-bottom: 5pxel-button typeprimary stylemargin-left: 10px新 增/el-buttonel-button typewarning stylemargin-left: 10px批量删除/el-buttonel-button typeinfo stylemargin-left: 10px导 入/el-buttonel-button typesuccess stylemargin-left: 10px导 出/el-button/divdiv classcard stylemargin-bottom: 5pxdiv stylemargin: 30pxel-table :datadata.tableData stripe stylewidth: 100%el-table-column propdate label日期/el-table-column propname label名字/el-table-column propaddress label地址/el-table-column label操作template #defaultscopeel-button typeprimary circleel-iconEdit //el-icon/el-buttonel-button typedanger circleel-iconDelete //el-icon/el-button/template/el-table-column/el-table/divdiv stylemargin-top: 10pxel-paginationv-model:current-pagedata.currentPagev-model:page-sizedata.pageSize:page-sizes[5, 10, 15, 20]layouttotal, sizes, prev, pager, next, jumper:total40//div/div/div
/templatescript setup
import {reactive} from vue;
import {Delete, Edit, Search} from element-plus/icons-vue;const data reactive({name:,currentPage:1,pageSize:5,total:40,tableData:[{ id:1, date:2025-3-11,name:岁岁岁平安,address:北京大兴 },{ id:2, date:2025-5-11,name:张三,address:湖南常德 },{ id:3, date:2025-1-11,name:李四,address:上海浦东 },{ id:4, date:2025-3-11,name:阿萨琪,address:深圳北 },{ id:5, date:2025-3-11,name:王五,address:北京玉泉 },{ id:6, date:2025-5-11,name:小菲菲,address:湖南益阳 },],})/scriptstyle scoped/style 页面渲染效果。 2多级菜单项的配置与实现。 官方示例渲染效果。 侧边导航栏代码示例。 !-- 侧边导航栏开始 --div stylewidth: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px) el-menu styleborder: 0
!-- 菜单项 --el-menu-itemel-iconHouse//el-icon系统首页/el-menu-itemel-sub-menu index1template #titleel-iconuser //el-iconspan用户管理/span/templateel-menu-item管理员信息/el-menu-itemel-menu-item普通用户信息/el-menu-item/el-sub-menuel-menu-itemel-iconDataAnalysis //el-icon数据统计/el-menu-item/el-menu/div
!-- 侧边导航栏结束 -- 页面渲染效果。 配置导航菜单项间的路由跳转。(router) 使用router属性配置父标签el-menu。使用index配置子标签el-menu-item各路由的路由跳转。 解决刷新页面后—高亮显示当前路由菜单。(defalut-active) 未设置属性defalut-active刷新页面时高亮显示异常。 使用绑定当前路由并指定其高亮显示:defalut-activexxxx即可完成。 代码示例如下。 !-- 侧边导航栏开始 --div stylewidth: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px) el-menu router :default-activerouter.currentRoute.value.path styleborder: 0
!-- 菜单项 --el-menu-item index/manager/home 系统首页/el-menu-itemel-sub-menu index1template #titleel-iconuser //el-iconspan用户管理/span/templateel-menu-item管理员信息/el-menu-itemel-menu-item普通用户信息/el-menu-item/el-sub-menuel-menu-item index/manager/data数据统计/el-menu-item/el-menu/div
!-- 侧边导航栏结束 -- 刷新页面后——菜单项文字的正常高亮显示。 设置css样式——选中某个菜单项的整体背景与文字都高亮显示。 在父级页面Manager.vue中书写css样式代码。基本原理设置标签选择器。当菜单项被选中时新增背景完成高亮显示。 style scoped
.el-menu .is-active {background-color: #e6ecf7;
}
/style 页面渲染效果。高亮时的浅蓝色背景色。 3页面头部的渲染实现。 中间布局分隔。styleflex:1 在头部的中间部分使用div styleflex:1通常用在flex布局的父容器中起到占据剩余空间的作用。常用于布局分隔或控制其他元素的位置。 头部右部分。头像、用户名实现 官方文档。 后面再实现文件上传“真头像”。这里使用网络地址假头像完成前端后台管理系统搭建。页面渲染效果。 代码示例1。(width使用自适应属性fit-content) !-- 页面头部开始 --div styleheight: 60px;background-color: #2597e8;display: flex;align-items: center!-- 左半部分-标题与logo --div stylemargin-left: 5px;font-size: 18px;display: flex;align-items: center;color: white岁岁岁平安-后台管理系统/div!-- 中间部分 --div styleflex: 1/div!-- 右半部分-头像 --div stylewidth: fit-content;display: flex;align-items: center;padding-right: 10pximg srchttps://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png alt stylewidth: 40px;height: 40pxspan stylemargin-left: 5px;color: white岁岁岁平安/span/div/div
!-- 页面头部结束 -- 页面渲染效果1。 代码示例2。(顺其自然) !-- 页面头部开始 --div styleheight: 60px;background-color: #2597e8;display: flex;align-items: center!-- 左半部分-标题与logo --div stylemargin-left: 5px;font-size: 18px;display: flex;align-items: center;color: white岁岁岁平安-后台管理系统/div!-- 中间部分 --div styleflex: 1/div!-- 右半部分-头像 --div stylewidth: 150px;display: flex;align-items: centerimg srchttps://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png alt stylewidth: 40px;height: 40pxspan stylemargin-left: 5px;color: white岁岁岁平安/span/div/div
!-- 页面头部结束 -- 页面渲染效果2。 优化导航栏的菜单项显示。 代码示例。 !-- 侧边导航栏开始 --div stylewidth: 200px;border: 1px solid #ddd;min-height: calc(100vh - 60px) el-menu router :default-activerouter.currentRoute.value.path styleborder: 0
!-- 菜单项 --el-menu-item index/manager/home el-iconHouse//el-icon系统首页/el-menu-itemel-menu-item index/manager/datael-iconDataAnalysis //el-icon数据统计/el-menu-itemel-sub-menu index1template #titleel-iconuser //el-iconspan用户管理/span/templateel-menu-item管理员信息/el-menu-itemel-menu-item普通用户信息/el-menu-item/el-sub-menuel-menu-itemel-iconUserFilled //el-icon个人信息/el-menu-itemel-menu-itemel-iconSwitchButton//el-icon退出登录/el-menu-item/el-menu/div
!-- 侧边导航栏结束 -- import {DataAnalysis, House, SwitchButton, User, UserFilled} from element-plus/icons-vue;
import router from /router/index.js; 页面渲染效果。 设置多级菜单项默认展开子菜单。(default-openeds) 官方文档。 代码示例。 页面渲染效果。 头部左部分。(标题、logo实现) 官方logo下载地iconfont-阿里巴巴矢量图标库图片保存路径到项目的静态资源目录。 代码示例。 !-- 页面头部开始 --div styleheight: 60px;background-color: #2597e8;display: flex;align-items: center!-- 左半部分-标题与logo --div stylemargin-left: 5px;display: flex;align-items: center;img src/assets/logo02.png alt stylewidth: 40px;padding-right: 5pxspan stylecolor: white;font-size: 18px;岁岁岁平安-后台管理系统/span/div!-- 中间部分 --div styleflex: 1/div!-- 右半部分-头像 --div stylewidth: 150px;display: flex;align-items: centerimg srchttps://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png alt stylewidth: 40px;height: 40pxspan stylemargin-left: 5px;color: white岁岁岁平安/span/div/div
!-- 页面头部结束 -- 页面渲染效果。
