【Vue3】超便捷的基于 Axios 的接口请求工具包1 前言 在一个 Vue + Typescript + Axios 的项目中，如果要写一个接口请求工具，大概是要这几个步骤： 写一个 Axios 实例配置，配置好 baseUrl、请求超时时间、请求拦截器、响应拦截器等等。 写一个文件，这个文件专门导出一个模块的请求函数。请求函数的内容是，接收请求参数，然后配置好请求方法、请求路径、请求头等信息，然后返回这个 Axios 请求结果。 为了有好的代码提示，还需要写一个文件，这个文件专门导出接口的响应数据类型，或者请求数据类型。 这只是一个基础的请求工具。 在此之后，你逐渐发现一个问题，当项目中有很多地方，需要使用 Loading 效果时，你就得为需要的接口，在相应的页面组件，都定义一个 Loading 的 ref，然后在请求发起前后，都编写 Loading 的触发逻辑。 如果某个接口，在多个页面都有使用，并且都需要 Loading 效果时，你... - 技术
9963 字
13 分钟
16
- 2026-06-23
【Vue3】Pinia + Transition-Group 优雅实现 Message 消息组件1 前言 消息组件是非常常用的组件之一，Element Plus 和 Naive UI 都有提供相应的消息组件，使用起来也相当方便。 那么，如果自己实现一个，怎么做呢？ 我最初的方案， 是用 VNode 实现的，创建一个 Message 组件的 VNode ，然后在 body 渲染出来。 这种办法的缺点很明显，写起来很复杂，最主要的是，样式和过渡动画不好控制。 现在，我使用一个新的方案，可以非常优雅，非常简单的实现这个消息组件，并且可以很轻松的控制样式和动画效果。 话不多说，看效果 2 实现 思路相当简单。响应式的数据，就由 Pinia 来做，然后渲染就是用 transition-group + v-for 的形式，渲染 Pinia 的响应式数据，没了。 首先，先要知道我们的组件需要什么。也就是要先定义类型。 想必一下就能猜到了，首先，必要就是消息内容 message，然后就是消息的类型... Vue 3 + Markdown-it 集成 Shiki 代码高亮1 前言 Markdown-it 集成代码高亮功能是我写博客项目最头疼的地方。当然，如果仅仅只需要代码高亮，那倒是很省事。我的要求是：可以自定义代码块样式、可以切换浅深色主题、可以展示语言标签、需要有行号、需要有一键复制代码功能。 我在旧的博客项目使用 highlight.js 已经实现过了，但代码写的却是一坨。我问了下 AI （通义），AI 告诉我除了 highlight.js 外，还有 prism.js 和 shiki 这两种方案。其总结如下： 特性 Highlight.js Prism.js Shiki 易用性 ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ 高亮精度 ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 主题质量 ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ (VS Code 一致) 体积 ⭐⭐⭐⭐⭐ (小) ⭐⭐⭐⭐ (中) ⭐⭐ (较大) SSR/静态生成 ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ (原生支持) 插件生态 ⭐⭐... - 技术
7589 字
10 分钟
16
- 2025-10-10