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

在视频上传到服务器前，获取视频时长，并截取多帧视频画面。做完了发现也难，但其实踩了不少坑，走了点弯路

认真阅读 el-table 的文档，发现 Element Plus 再一次贴心的替我们考虑了这种场景， 通过下面 2 个属性，就可以实现跨页选择。

elemen-plus 版本 `2.4.3 `提供了`footer` 插槽，可以把分页放在 footer 插槽中。在之前的版本中，分页也可以放在 default 插槽中，只是需要调整下样式给分页留个位

多行文字超出部门截断，并且可以展开收起。这个需求其实很容易实现，只需要 CSS 和一点简单的 JS 就可以。本文只讨论利用 css 截断，不考虑直接截取文字（不付费不给看剩余内容）的情况。

element-plus的 `Statistic` 统计组件也有数字滚动的效果，其实就是用vueuse的`useTransition`，实现数字滚动非常简单。

字典组件作为常用组件，好好封装一下很有必要。 1. 按需加载数据，只请求需要的字典数据 2. 无需频繁更新的数据，保存在缓存中 3. 需要实时更新，但又要减少请求

表格行内编辑字段是一个非常常见的做法，实现也很简单，稍微给 el-table的表格加点花样，自己封装一个简单的组件更加轻便。

element plus的无限滚动v-infinite-scroll虽然只暴露了 5 个选项，但是做一个 PC 端基本的下拉加载列表还是挺好用的。碰到几个小坑也填了，Mark 一下。

今天又写了5个比较常用的自定义指令:限制数字输入 v-inputNumber、提示信息v-tooltip、拷贝 v-copy、节流 v-throttle、防抖 v

Vue3提供了provide和inject来解决“prop 逐级透传”问题，无需层层传递，父组件可以直接把值提供给曾孙组件，值得拥有。

为了增强用户体验，同时提升开发效率，我们把字典标签二次封装，使用组合式函数让代码更简洁高效，so easy!！

上篇文章已经实现页面路由的权限控制。此外我们还需要更细粒度的控制，比如对按钮、链接、某个字段的显示做更加细致的控制。

路由权限这块刚开始的时候还是碰到一些问题，但是仔细梳理，画出思维导图，边coding边写文章时，觉得一切都清晰起来。

1. 简单换肤，提供N种配色方案供用户选择，一般只对配色进行切换，比如禅道，它提供了蓝色、粉色、绿色等方案； 2. 个性化定制，可以自己定制主要颜色、阴影、边框等样式，个性化更强；

是时候写一个自己的组合式函数Demo了，决定从table下手 👋 table是后台管理系统最常用的组件，而且基本功能差不多，复用程度高，所以使用hook二次封装table是个相当实用的想法。

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

使用vue-pdf-embed，在Vue3中实现PDF的预览和打印功能。总体来说还是很容易的，配置项不多。

今天专门挑选了几款主流编辑器，包括绕不开的富文本编辑器，码农最爱的markdown编辑器，还有用途相对少的代码编辑器。 时间有限的情况下，仅引入4个编辑器到我的vue3项目中

在过往的项目中，大部分Axios在项目搭建时就直接二次封装好了，拿来即用。满足通用需求是没有问题的，但碰到一些特别的接口返回，弱网场景，特别的产品需求，就觉得简单的封装不够用了。

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