immocha的博客

因为在实际场景中，大部分字典的值是几乎不会变动的。所以把字典数据缓存在前端没问题，对于需要实时更新也让它能够更新起来。接下来，就是实现下面 4 个需求：1. 按需加载数据，只请求需要的字典数据2. 无需频繁更新的数据，保存在缓存中3. 需要实时更新的数据，可以保持及时更新4. 减少请求次数

上一篇文章已经实现了页面路由的权限控制。除此之外，我们还需要更细粒度的控制，比如对按钮、链接、某个字段的显示做更加细致的控制。在实际场景中，常用以下两种判断方式在template模板中，一般使用指令可以直接控制按钮级别元素的显示通常在登录成功后，我们会获取细粒度的指令code和用户角色role，我们它放在userStore中,

路由权限这块，这也是项目最初立下的Flag，在我✍️写到系统第18篇文章的时候终于写了，刚开始的时候还是碰到一些问题，但是当我细细梳理，画出思维导图，写完文章后，觉得一切都清晰起来。如果一味前行不作停留，不去回顾和总结，很多东西带着一知半解就过去了忘记了。在忙碌的项目中，我觉得自己变成了一个螺丝钉，没有丝毫成长。停下来做一些输出和总结，整装待发反而更好。

如果你用过Element UI，应该知道它提供了一个自定义主题功能，下载后即可使用。方案二的思路和它类似，用户可以自己定义color，menu，border等一些常用值，然后保存为自己的主题方案未完待续。

终于写到组合式函数了，它类似vue2的mixin，但优于mixin，用好了可以事半功倍。在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用的函数。是时候写一个自己的组合式函数Demo了，决定从table下手 👋table是后台管理系统最常用的组件，而且基本功能差不多，复用程度高，所以使用hook二次封装table是个相当实用的想法。

i18n国际化的内容比较多，写文章的时间也用得比较长，从上周五开始到本周一，断断续续完成了。虽然实际工作中很多项目都不需要国际化，但是了解国际化的用法还是很有必要的。

其实我常常会纠结今天要写什么内容。因为希望能够保持每日更新，所以要写的内容不能太难——最好是半天可以搞出demo并且输出文章，所以很多东西浅尝辄止，并没有深入研究，还写出了一些bug 🐛今天又浅浅的研究了下在Vue3中如何预览PDF。

早就想着要放几个编辑器的Demo到项目中，这也是项目开始就立下的flag。今天专门挑选了几款主流编辑器，包括绕不开的富文本编辑器，码农最爱的markdown编辑器，还有用途相对少的代码编辑器。时间有限的情况下，仅引入4个编辑器到我的vue3项目中，尝试了一下基础功能，以及富文本编辑器上传图片的配置。实践证明使用过程并不复杂，也没有什么坑（也有可能是没有深入使用的缘故），再加上它们的文档都很详尽，还是值得推荐的。

在过往的项目中，大部分Axios在项目搭建时就直接二次封装好了，拿来即用。满足通用需求是没有问题的，但碰到一些特别的接口返回，弱网场景，特别的产品需求，就觉得简单的封装不够用了。实际上Axios非常强大，封装好了可以事半功倍，刚好今天趁此机会认真学习一下。这次主要在基本封装基础上增加了取消请求和自定义错误提示。

又是一个有意思的功能——Ctrl+K唤起全局搜索，Vuejs官网、Tailwind CSS官网… 都用上了。全局搜索功能可以帮助用户快速获取信息定位，对于改进用户体验感还是很有意义的。当然本项目做的是一个低配版，只对路由进行全局搜索，毕竟更多数据内容的搜索还得依靠后端返回，但是前端实现的思路是一致的。

截止目前，本项目用了2个接口，一个登录，一个获取列表数据。接下来想做的页面和功能，为了看起来更真实，就需要增加更多的模拟数据。Mock语法写得有些随意，看起来还是很假 😁Mock数据可以使用Mockjs插件，但我更喜欢用api平台，用起来方便也更真实，还可以跟后端同学协作。yApi、postman、apiPost、apifox这几个都尝试过，操作比较类似，都可以满足需求。

暗黑模式使用 Vue3+element Plus 简单模仿了禅道系统的高级搜索组件，说简单也有点复杂，还没有完全开发完，但是大体架子有了，剩下一些功能点继续coding。边开发边记录吧，因为这个相比之前的内容确实复杂一些，也更接地气。

本项目只简单使用了eChart的几个基本图表，如果你的需求比较复杂需要更多图表组件，可以修改echarts.ts中引入的组件。eCharts完整包太大了，一般项目中只会使用其中小部分图表，所以我们只用按需引入，尽量减少打包体积。在src/components 文件夹下新建目录echarts，新建文件echarts.ts。，所以在页面中可以直接使用新建的MyEchart组件，以下代码实现了一个简单的饼图。图表统计作为后台管理系统标配当然不能少，本项目选择使用最熟悉的eCharts。首先安装eCharts。

/ 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el , binding , vnode , prevVnode) {// 下面会介绍各个参数的细节 } , // 在元素被插入到 DOM 前调用 beforeMount(el , binding , vnode , prevVnode) {} , // 在绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用 mounted(el , binding , vnode , prevVnode) {

以前都是用别人现成的多页签组件，自己也想尝试下做个Vue3的版本，目前还只有基本功能，慢慢完善。

虽然Vite在使用unplugin-vue-components产生了一些不愉快的问题，但是无法忽视这个强大的插件，它对于我们开发还是很有帮助。插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）；作者是Vite生态圈大名鼎鼎的Anthony Fu不知道大家有没有留意项目中这个文件，当我们在src/components文件夹下加入新的组件，unplugin-vue-components会自动修改文件内容加入我们新写的组件，我们无须在项目任何地方注册组件即可直接在页面中使用。

iconfont是过去使用较多的图标方案，后来更倾向于使用SVG，因为SVG更灵活兼容性更好。在最近的几个Vue2项目中，因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。Element Plus的图标库相对Element UI更加丰富，然而对于喜欢折腾的人还是远远不够的，在我折腾的这个个人仓库，决定尝试更多图标解决方案。除了使用Element Plus自带的图标，iconify是本次尝试的主要目的。

在src目录新建文件夹store，然后新建文件user.tsimport {UserInfo } from '~/types/index' // 此处采用组合式API写法 // Pinia 同样支持选项式API写法 export const useUserStore = defineStore('user' ,() => {

项目搭建好之后，开始写基本的布局。后台管理系统的布局3大元素：头部、侧栏、主要内容，各种布局结构相差不大，我选择了下图所示的布局，其中头部、侧栏、页签在页面中是固定的，只有主要内容容器会跟随页面滚动。

作为一个有追求（wuliao）的前端，那就自己开一个git仓库练手吧，想试验什么就随便试，既没有deadline的压力，也不用去考虑产品需求，UI还原度。安装Element Plus，使用按需导入的方式 https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5 ， 这里埋了个坑，后面会说。基本上一个项目的雏形的就出来了。接下来先从layout布局开始。