快去试用下 Vue3 新特性 defineModel，贼好用

具体讨论可以参见该RFC，看名字可能有的人就知道可能是和v-model有关了，你猜的没错，新出的defineModel可以更加快捷的自定义组件上的v-model。

Naive UI 动态自定义换肤实现

之前因为项目需要，实现了 Ant Vue 的自定义换肤并记录了下实现过程Ant Vue 1.x 动态自定义换肤，后来新项目采用Naive UI，也就自己摸索着实现一下自定义换肤，顺便自己记录一下。

Vue3 中使用 fake-progress 模拟“真实”的进度条

最近在逛 GitHub 的过程中发现一个很有趣的库，fake-progress，用来模拟“真实”的进度条，虽然看着已经很多年没更新了，但是不妨碍在 Vue3 中集成使用，这样就不用手搓模拟进度条了，在页面加载顶部进度条、文件上传进度条等等很有用处。

Vue3 状态管理是时候放弃 Vuex 使用大菠萝 Pinia 了

之前的时候我们通常使用Vuex进行状态管理，Vue3 的时候组合式 API大火，Pinia 因此诞生，其目的是设计一个拥有组合式 API 的 Vue 状态管理库，特点简单易用好上手。由于 Vuex 现在处于维护模式，新的应用官方更推荐使用 Pinia：详情。

使用 Lottie 动画装饰一下你的 404 页面

自己博客的 404 页面太单调无趣了，由于之前项目使用过Lottie-Web做过动画，想着给 404 页面加上一个有趣的动画。然后就去 LottieFiles动画库搜索了下404，发现一个和谷歌浏览器断网小恐龙游戏类似的的 404 动画效果，感觉很有趣，那就用它了，最终的效果大家可以通过访问 404 页面查看。

文字超长显示省略号和 ToolTip

日常开发过程中避免不了需要显示一些内容，但是内容超长了需要显示...，鼠标悬停需要显示完整内容，原生的title属性虽然可以做到上述的需求，但是完整内容无法复制，也不适用于隐藏的内容是非纯文本的情况，一般 UI 组件都会提供 ToolTip 的组件，我们就可以利用这个组件控制鼠标悬停显示完整内容。下面记录下实际开发过程中使用 Element UI 或者 Ant Design Vue 实现该需求过程。

Vue3 按需加载百度地图、高德地图

记录下日常开发中需要使用地图的场景下加载并使用地图的方法。

Vue 中使用 CSV 优雅的管理 i18n 多语言

项目中使用 CSV 文件将多语言集中在一起，方便同时对一个 Key 进行修改。
通过一个可执行的文件icotjo，将 CSV 转换成各语言的 JSON 文件。
icotjo是一个 Go 写的工具，源码可在https://github.com/wonsikin/icotjo查看。

解决 Vite 引入 variables 变量样式文件报错 This file is already being loaded 问题

之前脚手架使用的 Vue Cli 的时候，一般样式文件会定义一个变量样式文件，如variables.scss，会在vue.config中全局引入，而variables.scss中也会通过:export的形式将变量导出，这样也方便在其他文件如 js 中引入相关变量。

Ant Vue 1.x 动态自定义换肤

由于项目老平台使用的 UI 框架是 Ant Vue 1.x 的版本，首先考虑的就是官方自己的Pro Admin平台的方案，由于 Ant Admin 的方案只支持了主题色换肤，而内容项目平台是需要支持多种颜色换肤，如主题色、各个功能色，超链接等颜色换肤。既然官方的 Admin 平台支持换肤，咱们就去具体研究下怎么实现的，既然支持一种那应该也支持多种颜色的换肤的。