从零开始写一个Vue3+Element Plus的后台管理系统

在实际项目开发中，自定义指令用得还是比较多的，比如：复制粘贴、输入框防抖、输入框禁止特殊字符、权限校验、背景水印、拖拽等等... 指令确实是个优雅的存在。

Mock数据可以使用Mockjs插件，但我更喜欢用api平台，用起来方便也更真实，还可以跟后端同学协作。

暗黑模式 使用 Vue3+element Plus 简单模仿了禅道系统的高级搜索组件，说简单也有点复杂，还没有完全开发完，但是大体架子有了，剩下一些功能点继续coding。边开发边记录吧

1. 使用 Pinia 记录页签数据、处理操作 2. 初始状态没有页签数据，使用默认路由数据填充 3. 右击页签，显示更多关闭操作 4. 使用el-scrollbar 实现横向滚动

如果我们把登录用户的信息放在Pinia中，那肯定需要做持久化，要不页面一刷新，用户信息就没有了。推荐pinia-plugin-persistedstate

Element Plus的图标库相对Element UI更加丰富，然而对于喜欢折腾的人还是远远不够的，本次主要尝试的是iconify

接触Vue3有一年的时间，除了刚开始用Vue3做了一个小小的项目，其后一直没有机会在项目中真正使用Vue3，反而一直维护Vue2的老项目。作为一个有追求（wuliao）的前端，那就自己开一个仓库练手

在最新的一版，因为想要实现更有意思的效果——当主要内容滚动到头部，若隐若现的感觉（此处参考了tailwind官网），重新修改了布局的样式。

在本地开发环境，点击菜单切换的时候，新开的页面的加载非常慢，往往过了几十秒才能渲染出来。研究了好一阵，才发现是按需导入的问题

图表统计作为后台管理系统标配当然不能少，本项目选择使用最熟悉的eCharts。 eCharts完整包太大了，一般项目中只会使用其中小部分图表，所以我们只用按需引入，尽量减少打包体积。