Skip to main content

Vue3 - 生态圈指南创建文档的目的主要是为了,方便学习或使用vue全家桶的L友,对vue生态圈的一些流行插件或者组件库有一个全面的了解,在以后的学习或者开发中,熟练使用这些插件或者组件库, 提升开发效率, 多出来的时间来多刷刷论坛 🥰----------------------[!tip]提示介于2025年年末了, 本次分享的组件库和插件都用于vue3环境,请知悉!VUE官方维护为方便初学者对vue生态有个全面的了解, 先记录一些VUE官方的插件和组件库社区分享[!tip]提示社区插件生态层出不穷, 已经挑选实用且知名插件,由于是个人整理,难免有遗漏之处,L友有推荐插件, 可在评论区补充插件介绍Vue Test Utils 与 Vitest 的关系● Vue Test Utils: 为方便开发者测试Vue组件,官方维护了一套简易实用的组件测试

  1. 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 participants

    Read full topic

    via LINUX DO - 热门话题 (author: Waviness6884)

    Invalid media:
    image
    image
    image
👀 open eyes to see the world. 丨 site views: -