编辑src/style.css，添加如下样式，自定义一个主颜色，在亮色和暗黑模式下都使用这个主颜色。 :root { --el-color-primary: green; } :root.dark { --el-color-prima...

设置 编辑src/main.ts，引入暗黑模式样式文件。 import 'element-plus/dist/index.css' import 'element-plus/theme-chalk/dark/css-vars.css' 编辑src/views/Main.vue，...

安装插件 npm install @vueuse/core@10.11.0 编辑src/views/Main.vue，template段header-right下最前面添加如下代码。 <el-icon style="margin-right: 15px;" @click=...

编辑src/views/Main.vue，template段header-right修改如下。 <div class="header-right"> <el-dropdown trigger="click" @command="handleUserCommand">...

编辑src/views/Main.vue，template段header-left修改如下。logo和标题全部在router-link标签下，即点击的时候会跳转到/这个路由，展开状态下显示logo和标题，折叠状态下...

现在当我们把菜单折叠然后再刷新浏览器，菜单又回到默认的展开状态了。我们要把展开折叠状态持久化，让它在下次进入时为关闭前的状态。为了实现这个目标，我们要引入pini...

顶部 center 添加图标 编辑src/views/Main.vue，template段header-center修改如下。即折叠状态显示expand图标，展开状态显示fold图标，并使用size属性设置了图标大小。 &...

获取菜单宽度 [图片] 通过调试工具得知菜单展开时宽度为300px 编辑src/views/Main.vue，设置菜单折叠。 <el-menu router :default-active="route.path" :collapse="tr...

顶部整体使用左、中、右的布局。左侧宽度跟菜单宽度一样，如果菜单未折叠就显示后台logo和后台名称，如果折叠了就只显示后台logo。右侧内容自适应，主要是显示系统工具按...

测试 编辑src/views/Home.vue，使内容超过布局。 <template> <p v-for="item in 50">首页{{ item }}</p> </template> 浏览器查看，当内容超...

因为权限的问题，角色不同显示的菜单也不一样，所以需要动态生成。 图标组件 安装 npm install @element-plus/icons-vue@2.3.1 编辑src/main.ts，注册所有图标。 import...

软件版本 Node.js v20.11.1，安装参考 Node.js安装和使用 获取项目 关注干货悦读公众号获取项目源码(项目源码是按照教程步骤编写出来的，可以略过直接阅读后面章节) 运行...

视图 新建src/views/Home.vue，内容如下。 <template> 首页 </template> 新建src/views/sys/AdmUserPassword.vue，内容如下。 <template> 密...

布局参考 文档，整体使用上、左、右的布局。 [图片] 编辑src/views/Main.vue，内容如下。 <template> <el-container> <el-header>Header&...

新建视图 新建src/views/Login.vue，内容如下。 <template> 这是登录页 </template> 新建src/views/Main.vue，内容如下。 <template> 这是主...