跳至主要內容
快去试用下 Vue3 新特性 defineModel,贼好用

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

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


Bing🐣大约 2 分钟VueVue3defineModel
Vue3 中使用 fake-progress 模拟“真实”的进度条

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

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


Bing🐣大约 3 分钟VueVue3VueVue3fake-progress
Vue3 状态管理是时候放弃 Vuex 使用大菠萝 Pinia 了

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

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


Bing🐣大约 8 分钟VueVuePiniaVuex
使用 Lottie 动画装饰一下你的 404 页面

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

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


Bing🐣大约 4 分钟LottieVueLottie-WebLottieFiles
文字超长显示省略号和 ToolTip

文字超长显示省略号和 ToolTip

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


Bing🐣大约 5 分钟VueElement UIAnt Design VueVueElement UIAnt Design VueToolTip
Vue3 按需加载百度地图、高德地图

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

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


Bing🐣大约 3 分钟VueVue3VueVue3地图百度地图高德地图
Vue 中使用 CSV 优雅的管理 i18n 多语言

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

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


Bing🐣大约 3 分钟Vuei18nVueVitei18nVue I18n
解决 Vite 引入 variables 变量样式文件报错 This file is already being loaded 问题

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

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


Bing🐣大约 1 分钟VueViteVueViteScss
Ant Vue 1.x 动态自定义换肤

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

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


Bing🐣大约 13 分钟VueAnt Design VueVueAnt Design VueAnt Vue一键换肤
2
3