vite+vue+ts+element从零开发管理后台框架
关注
分享
扫一扫
vite+vue+ts+element从零开发管理后台框架
mirahs
这个作者很懒，什么都没留下…
展开
-
vite+vue+ts+element-plus从零开发管理后台框架(22)-路由组件缓存
现在虽然缓存了，但要在关闭页签时清除缓存，免得不能加载新数据。一开始加载然后缓存，关闭页签后重新打开又重新加载。不管切换几次它都只加载了一次，说明缓存成功了。加一，这样它下次打开时就会重新加载。切换几次就加载了几次。，给每个路由配置一个。方法，即在关闭时路由。，添加一行调试信息。原创 2025-03-26 10:45:21 · 160 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(21)-多页签点击切换
浏览器测试点击不同的页签可以切换了。原创 2025-03-13 14:03:43 · 87 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(20)-多页签移除和跳转
浏览器测试应该可以正常关闭页签，关闭后会跳转前一个页签的路由，并且当只有一个页签时不会显示关闭按钮。时不能移除，添加移除事件监听。原创 2025-03-13 14:02:48 · 217 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(19)-多页签
发现多页签正常显示了，并且当页签超过内容时鼠标移上去会显示滚动条。，可以设置任意值，如果不设置布局就会出问题。，在合适的时机插入页签数据。下最后面添加如下代码。原创 2025-03-12 15:04:38 · 293 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(18)-主颜色优化
发现鼠标滑过后颜色出问题了，这是因为按钮样式使用了主颜色相关的变量，而主颜色相关的变量不止。所以我们要把这些主颜色相关的变量都动态设置。刷新浏览器，现在发现主颜色及相关的。，添加一个主颜色的按钮。，添加如下辅助方法。原创 2025-03-12 15:03:06 · 368 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(17)-主颜色动态设置
之前的主颜色是静态设置的，这里通过颜色选择器选择颜色动态设置。原创 2025-03-10 15:57:54 · 699 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(16)-主颜色设置
添加如下样式，自定义一个主颜色，在亮色和暗黑模式下都使用这个主颜色。我们再换个主颜色比如红色看下。原创 2025-03-10 15:57:06 · 311 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(15)-暗黑模式
后再刷新，发现网页变成了亮色模式。这是因为模式是在主页视图初始化的，我们应该在根视图初始化。再重复上面的步骤，发现问题已经解决了。点击切换模式开关已经可以切换模式了。先设置成暗黑模式，浏览器访问。段，初始化亮色和暗黑模式。，引入暗黑模式样式文件。下最前面添加如下代码。原创 2025-03-06 13:46:35 · 579 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(14)-全屏切换
现在点击这个图标就能进入和退出全屏了。下最前面添加如下代码。原创 2025-03-06 13:45:37 · 311 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(13)-个人信息
编辑template段修改如下。段引入并实例化router，再添加方法处理下拉菜单按钮事件。段修改如下。原创 2025-03-05 16:30:53 · 256 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(12)-logo和标题
编辑template段修改如下。logo和标题全部在标签下，即点击的时候会跳转到这个路由，展开状态下显示logo和标题，折叠状态下只显示logo。段修改如下，这里要注意route-link渲染之后就是a标签。原创 2025-03-05 16:29:49 · 137 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(11)-菜单展开折叠状态持久化
现在当我们把菜单折叠然后再刷新浏览器，菜单又回到默认的展开状态了。我们要把展开折叠状态持久化，让它在下次进入时为关闭前的状态。为了实现这个目标，我们要引入pinia这个依赖以及它的持久化插件。原创 2025-03-04 14:37:16 · 541 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(10)-菜单展开折叠状态切换
修改如下，即取消了背景色，使用。段图标属性，添加点击事件回调。属性设置了图标大小。段添加点击回调函数。原创 2025-03-04 14:36:13 · 402 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(09)-动态设置侧边栏和顶部左
它有点太宽了，我们设置它的宽度为。通过调试工具得知菜单展开时宽度为。通过调试工具得知菜单折叠时宽度为。通过上面得知菜单展开时的宽度为。段侧边栏和菜单修改如下。原创 2025-03-03 14:11:11 · 323 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(08)-顶部整体布局
顶部整体使用左中右的布局。左侧宽度跟菜单宽度一样，如果菜单未折叠就显示后台logo和后台名称，如果折叠了就只显示后台logo。右侧内容自适应，主要是显示系统工具按钮和用户信息。中间使用剩余空间，主要是显示菜单折叠按钮和多页签。原创 2025-03-03 14:10:12 · 435 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(07)-主页内容布局
浏览器查看，当内容超过布局时有两个问题。一是滚动时会带动顶部和侧边栏滚动，二是滚动条太丑了。原创 2025-02-28 15:27:36 · 216 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(06)-菜单和路由动态生成
因为权限的问题，角色不同显示的菜单也不一样，所以需要动态生成。原创 2025-02-28 15:26:51 · 295 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(00)-说明
公众号获取项目源码(项目源码是按照教程步骤编写出来的，可以略过直接阅读后面章节)Node.js v20.11.1，安装参考。获取源码后，解压压缩包并进入。目录，执行如下命令。原创 2025-02-27 18:18:41 · 961 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(05)-菜单和路由
发现菜单正确渲染出来并且点击菜单子路由跳转后。原创 2025-02-27 18:12:21 · 357 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(04)-整体布局
保存后再查看浏览器，发现高度已经铺满了。，会发现高度没有铺满。原创 2025-02-27 18:11:27 · 227 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(03)-路由
或其他任意不存在的路由网页都会显示。原创 2025-02-27 18:10:29 · 113 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(02)-路径别名配置
路径别名是为了方便模块文件引入，比如有这样一个模块。如果没有路径别名，可能有的是，有的是这样引入。而有了路径别名，不管当前模块文件在哪个路径，都可以统一用这样的方式引入。原创 2025-02-27 18:09:35 · 193 阅读 · 0 评论 -
vite+vue+ts+element-plus从零开发管理后台框架(01)-初始化
字段添加如下配置，支持。原创 2025-02-27 18:08:32 · 280 阅读 · 0 评论