Vue3 - 生态圈指南

Vue3 - 生态圈指南

创建文档的目的主要是为了,方便学习或使用vue全家桶的L友,对vue生态圈的一些流行插件或者组件库有一个全面的了解,在以后的学习或者开发中,熟练使用这些插件或者组件库,提升开发效率,多出来的时间来多刷刷论坛 🥰

----------------------

[!tip]提示
介于2025年年末了, 本次分享的组件库和插件都用于vue3环境,请知悉!

VUE官方维护

为方便初学者对vue生态有个全面的了解, 先记录一些VUE官方的插件和组件库

社区分享

[!tip]提示
社区插件生态层出不穷, 已经挑选实用且知名插件,由于是个人整理,难免有遗漏之处,L友有推荐插件, 可在评论区补充

插件介绍

Vue Test Utils 与 Vitest 的关系

● Vue Test Utils: 为方便开发者测试Vue组件,官方维护了一套简易实用的组件测试。它提供了一些方法来独立地挂载 Vue 组件并与 Vue 组件进行交互。 ●

Vue Test Utils 通常需要和一个测试运行器配合使用。流行的测试运行器包括： Vitest。基于终端，具有实验性的浏览器 UI。
Cypress。基于浏览器，支持 Vite、webpack。
Playwright (实验性) 基于浏览器，支持 Vite。
WebdriverIO。基于浏览器，支持 Vite、Webpack，跨浏览器支持。

Vitest: 一个原生支持 Vite 的测试框架, 一般情况下与 Vue Test Utils 配套使用, 如果你的项目是vue的话,因为vite也可以运行 react 或者纯 JS/TS 项目.

eslint-plugin-vue

稍后会写一篇 vue3 + TS 的配套指南, 已有的文档:

eslint配置插件指南 - JS项目 文档共建

为什么要写 建立本文档的目的,在于 eslint 规则在v9后启用了扁平化配置规则, 以及越来越多的规则插件,让各位前端工程师愈发分不清该用什么,不该用什么, 更重要的是现在的规则有了排序,如果导入插件的顺序不对,则白费一番功夫 基于此, 我打算创建一系列 eslint 相关的文档, 适配 typescript、vue、react(可能需要L友共建,我不会react), 为保证文档不…

eslint配置插件指南 - TS项目 文档共建

JS项目配置指南: [!tip] 文档适用于Typescript版本>=5.0以上,最好是最新版 现代插件介绍 包名 主要作用 typescript-eslint 取代了旧的 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin,统一为一个包 eslint-import-resolver-typ…

Vue DevTools

这个其实一开始是一个浏览器插件, 之前vue2的时候挺好用, 但是到vue3后, 插件就不太好用了, 在组件跟踪,路由监视,持久化存储上表现不佳, 偶尔出现插件白屏或者不加载的情况

所以官方出了一个npm包, 属于vite插件

pnpm add -D vite-plugin-vue-devtools

//  vite.config.ts

import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vueDevTools(),
  ],
})

在你的项目底部会出现2个按钮, 点开后界面与浏览器插件相似,功能更强,而且对于 vue3 的组件、路由和持久化跟踪良好, 目前没遇到过什么问题

----------------------

// TODO:待更新

20 posts - 15



via - 热门话题 (author: Waviness6884)

Invalid media:
image
image
image