用数字做域名网站/湖北网站设计

目录

一、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>页面头部的渲染实现。

中间布局分隔。（style="flex: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-router'const 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.title=to.meta.titlenext() //必须调用的方法
})export default router

<1>页面头部以下部分实现。

左侧导航栏设计与高度巧妙设定。(element-plus菜单Menu)
官方文档。

设置官方给的标签<el-menu>自带的border为0。因为不好看且最小视窗高度没有设定。

所以需要自己手动使用min-height进行设定。这样就让它根据内容进行填充border。

代码示例。

<template>
<!-- 页面头部开始 --><div style="height: 50px;background-color: #2597e8"></div>
<!-- 页面头部结束 --><!-- 页面下面部分开始 -->
<!-- flex布局分为左右两边 --><div style="display: flex"><!-- 侧边导航栏开始   --><div style="width: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px)" ><el-menu style="border: 0">
<!--    菜单项    --><el-menu-item>系统首页</el-menu-item><el-menu-item>数据统计</el-menu-item></el-menu></div><!-- 侧边导航栏结束   --><!-- 右侧主体区域开始  --><!-- 右侧设置自适应宽度   --><!--  flex是一个 CSS弹性盒布局属性的简写形式，flex: 1 等同于 flex: 1 1 0%。当父容器有剩余空间时，该元素可以按照比例进行扩展，这里是占据所有剩余空间  --><div style="flex: 1;width: 0;background-color: #edf3f9;padding: 10px"><RouterView/></div><!-- 右侧主体区域结束  --></div>
<!-- 页面下面部分结束 --></template><script setup></script>

页面渲染效果。

右侧主体区域数据展示区设计。
通过<RouterView/>将嵌套子路由页面渲染出来。

<!-- 右侧主体区域开始  --><!-- 右侧设置自适应宽度   --><!--  flex是一个 CSS弹性盒布局属性的简写形式，flex: 1 等同于 flex: 1 1 0%。当父容器有剩余空间时，该元素可以按照比例进行扩展，这里是占据所有剩余空间  --><div style="flex: 1;width: 0;background-color: #edf3f9;padding: 10px"><RouterView/></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)  ;
}

应用卡片样式后的简单代码示例。

<template><div><div class="card"><el-input style="width: 240px" v-model="data.name" placeholder="请根据名称查询" :prefix-icon="Search"></el-input></div></div>
</template><script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";const data = reactive({name:'',})</script><style scoped></style>

加入卡片样式后的页面渲染效果。

右侧主体区域设计代码示例。
注意：到这里都只是前端页面的渲染效果。关于前后端的数据交换，实现数据库的增删改查后才能完成真正的按钮功能、分页查询效果。

<template><div><div class="card" style="margin-bottom: 5px"><el-input style="width: 240px" v-model="data.name" placeholder="请根据名称查询" :prefix-icon="Search"></el-input><el-button type="primary" style="margin-left: 10px">查 询</el-button><el-button type="warning" style="margin-left: 10px">重 置</el-button></div><div class="card" style="margin-bottom: 5px"><el-button type="primary" style="margin-left: 10px">新 增</el-button><el-button type="warning" style="margin-left: 10px">批量删除</el-button><el-button type="info" style="margin-left: 10px">导 入</el-button><el-button type="success" style="margin-left: 10px">导 出</el-button></div><div class="card" style="margin-bottom: 5px"><div style="margin: 30px"><el-table :data="data.tableData" stripe style="width: 100%"><el-table-column prop="date" label="日期"/><el-table-column prop="name" label="名字"/><el-table-column prop="address" label="地址"/><el-table-column label="操作"><template #default="scope"><el-button type="primary" circle><el-icon><Edit /></el-icon></el-button><el-button type="danger" circle><el-icon><Delete /></el-icon></el-button></template></el-table-column></el-table></div><div style="margin-top: 10px"><el-paginationv-model:current-page="data.currentPage"v-model:page-size="data.pageSize":page-sizes="[5, 10, 15, 20]"layout="total, sizes, prev, pager, next, jumper":total="40"/></div></div></div>
</template><script 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:'湖南益阳' },],})</script><style scoped></style>

页面渲染效果。

<2>多级菜单项的配置与实现。

官方示例渲染效果。

侧边导航栏代码示例。

  <!-- 侧边导航栏开始   --><div style="width: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px)" ><el-menu style="border: 0">
<!--    菜单项    --><el-menu-item><el-icon><House/></el-icon>系统首页</el-menu-item><el-sub-menu index="1"><template #title><el-icon><user /></el-icon><span>用户管理</span></template><el-menu-item>管理员信息</el-menu-item><el-menu-item>普通用户信息</el-menu-item></el-sub-menu><el-menu-item><el-icon><DataAnalysis /></el-icon>数据统计</el-menu-item></el-menu></div>
<!-- 侧边导航栏结束   -->

页面渲染效果。

配置导航菜单项间的路由跳转。(router)
使用router属性配置父标签<el-menu>。
使用index配置子标签<el-menu-item>各路由的路由跳转。

解决：刷新页面后—"高亮"显示当前路由菜单。(defalut-active)
未设置属性defalut-active刷新页面时高亮显示异常。

使用绑定当前路由并指定其高亮显示：":defalut-active"=xxxx即可完成。

代码示例如下。

<!-- 侧边导航栏开始   --><div style="width: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px)" ><el-menu router :default-active="router.currentRoute.value.path" style="border: 0">
<!--    菜单项    --><el-menu-item index="/manager/home" >系统首页</el-menu-item><el-sub-menu index="1"><template #title><el-icon><user /></el-icon><span>用户管理</span></template><el-menu-item>管理员信息</el-menu-item><el-menu-item>普通用户信息</el-menu-item></el-sub-menu><el-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>页面头部的渲染实现。

中间布局分隔。（style="flex:1"）
在头部的中间部分使用<div style="flex:1">通常用在flex布局的父容器中，起到占据剩余空间的作用。常用于布局分隔或控制其他元素的位置。

头部右部分。（头像、用户名实现）
官方文档。

后面再实现文件上传“真头像”。这里使用网络地址"假头像"完成前端后台管理系统搭建。
页面渲染效果。

代码示例1。(width使用自适应属性fit-content)

<!-- 页面头部开始 --><div style="height: 60px;background-color: #2597e8;display: flex;align-items: center"><!--  左半部分-标题与logo  --><div style="margin-left: 5px;font-size: 18px;display: flex;align-items: center;color: white">岁岁岁平安-后台管理系统</div><!-- 中间部分   --><div style="flex: 1"></div><!--  右半部分-头像  --><div style="width: fit-content;display: flex;align-items: center;padding-right: 10px"><img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" style="width: 40px;height: 40px"><span style="margin-left: 5px;color: white">岁岁岁平安</span></div></div>
<!-- 页面头部结束 -->

页面渲染效果1。

代码示例2。(顺其自然)

<!-- 页面头部开始 --><div style="height: 60px;background-color: #2597e8;display: flex;align-items: center"><!--  左半部分-标题与logo  --><div style="margin-left: 5px;font-size: 18px;display: flex;align-items: center;color: white">岁岁岁平安-后台管理系统</div><!-- 中间部分   --><div style="flex: 1"></div><!--  右半部分-头像  --><div style="width: 150px;display: flex;align-items: center"><img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" style="width: 40px;height: 40px"><span style="margin-left: 5px;color: white">岁岁岁平安</span></div></div>
<!-- 页面头部结束 -->

页面渲染效果2。

优化导航栏的菜单项显示。
代码示例。

<!-- 侧边导航栏开始   --><div style="width: 200px;border: 1px solid #ddd;min-height: calc(100vh - 60px)" ><el-menu router :default-active="router.currentRoute.value.path" style="border: 0">
<!--    菜单项    --><el-menu-item index="/manager/home" ><el-icon><House/></el-icon>系统首页</el-menu-item><el-menu-item index="/manager/data"><el-icon><DataAnalysis /></el-icon>数据统计</el-menu-item><el-sub-menu index="1"><template #title><el-icon><user /></el-icon><span>用户管理</span></template><el-menu-item>管理员信息</el-menu-item><el-menu-item>普通用户信息</el-menu-item></el-sub-menu><el-menu-item><el-icon><UserFilled /></el-icon>个人信息</el-menu-item><el-menu-item><el-icon><SwitchButton/></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 style="height: 60px;background-color: #2597e8;display: flex;align-items: center"><!--  左半部分-标题与logo  --><div style="margin-left: 5px;display: flex;align-items: center;"><img src="@/assets/logo02.png" alt="" style="width: 40px;padding-right: 5px"><span style="color: white;font-size: 18px;">岁岁岁平安-后台管理系统</span></div><!-- 中间部分   --><div style="flex: 1"></div><!--  右半部分-头像  --><div style="width: 150px;display: flex;align-items: center"><img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" style="width: 40px;height: 40px"><span style="margin-left: 5px;color: white">岁岁岁平安</span></div></div>
<!-- 页面头部结束 -->