Vite插件大全

大家好，欢迎来到IT知识分享网。

Vite下一代前端开发与构建工具

Vite优势

• 💡 极速的服务启动
• ⚡️ 轻量快速的热重载
• 🛠️ 丰富的功能
• 📦 优化的构建
• 🔩 通用的插件
• 🔑 完全类型化的API

Vue 3

• Vitesse 基于Vite的入门模板.
• vite-vue3-tailwind-starter Vite + Vue 3 + Tailwind CSS 的入门脚手架模板.
• vite-ts-tailwind-starter TypeScript，Tailwind CSS，Cypress.io e2e 测试 + CI.
• vite-electron-quick 带有 Vue 3、TypeScript 和 Electron 11 的入门模板.
• vite-electron-builder 基于 Vite 的 Electron 应用程序的安全样板.
• vue-vben-admin 基于 Vue3、Ant-Design-Vue、TypeScript 的后台管理模板.
• electron-vue-next 一个用于快速上手 vue-next 和 electron 的模板.
• vite-electron-ts 一个可以帮助你开始在 Electron 中使用 Vite、Vue 3 和 Typescript 进行开发模板.
• vue-pure-admin 基于 Vue3、TypeScript、Tailwind CSS、element-plus 的后台管理模板.
• vite-ts-quick Vue 3 + Vuex + Vue-router + TypeScript 快速模板.
• fast-crud 面向选项的 crud 框架，以闪电般的速度开发 crud.
• electron-vite-quick-start – 一个基于 vite 开发的 Electron 应用程序.
• NeuVite – 带有 Vite.js 和 Vue.js 的 Neutralino.js 模板.
• vue3-SSR-starter – 使用一行代码预取并将状态同步到客户端，开箱即用.
• electron-vite-template – Electron 13、Vue 3 和 TypeScript。让您的桌面开发更轻松.
• vite-tauri-template – Tauri + Vite + Vue 3 + Vuetify 3 桌面应用模板.
• vue-vite-h5 – 使用 Vue3、TypeScript 和 Vant 开发移动应用程序.
• electron-vue-vite – Electron，Vue3，Vite 集成.
• Vitesome – 带有Vite.js 的简单固执的 Vue3 入门模板，使用Vue3 + TypeScript + WindiCSS + Vue Router 4, i18n and Iconify.
• vitesse-lite – Vitesse 的轻量级版本.
• vitesse-webext – WebExtension Vite 入门模板.
• Vitesse SSR – 基于 Vitesse 的服务器端渲染。部署到 Vercel 或任何 Node.js 环境.
• Vitesse Edge – 基于 Vitesse 的边界侧渲染，由 Vitesse 提供支持。部署到 Cloudflare Workers.
• vite-ts-vue3-todo – Vue3 + TS + Vue-Router4 + Pania2 模板.
• vue-component-template – 一个可以创建自己的 Vue3 TSX 组件的模板.
• vite-vue3-tsx-starter – 这个模板可以帮助你开始在 Vite 中使用 Vue 3 和 Typescript 进行开发。.
• fast-vite-electron – Vite + Electron 和 Esbuild 模板.
• fast-vite-nestjs-electron – Vue3 + Vite + Electron + Nestjs 与 esbuild.
• naive-ui-dashboard-template – UI 友好，Vue 3 + TSX + TailwindCSS 2 JIT + PostCSS + Naive UI.
• vitailse – 类似于 Vitesse，但具有 Tailwind CSS.
• vitespa – 没有 SSG 的基于 Vitesse 的 SPA.

Vue 2

• vite-vue2-windicss-starter – Vue 2、Vue 路由器、组合 API、VueUse、Windi CSS 和 TypeScript.
• admin-base-tmpl -使用 Vue2、TypeScript、Element UI 的基本管理模板.
• vite-ts-vue2-todo – Vue2 + ts + Vue-Router3 + Pania1 + Composition API.
• vite-vue2-typescript – 使用组合 API 的 Vue2 TypeScript 入门模板.

React

• vite-reactts-electron-starter – React，Tailwind CSS，TypeScript 和 Electron.
• vite-electron-esbuild-stater – 带有 React、TypeScript、Electron 和 esbuild 的入门模板.
• Vitamin – React TypeScript、TailwindCSS、SPA + PWA、Cypress 和 CI.
• vite-reactts-eslint-prettier – React，TypeScript，ESlint，Prettier，预提交.
• vite-reactts-antd-starter – 基于React，TypeScript，Antd模板.
• react-vite-admin – 基于 React、Recoil、React Query、React Hooks、TypeScript、Axios 构建的后台模板.
• vitejs-template-react-rescript – 基于 React + ReScript 的一个启动器.
• vite-react-rtkq – 带有选择加入 TypeScript 的 React + Redux Toolkit 查询入门模板.
• vite-react-quick – Vite + React + React-router-dom + TypeScript 快速模板.
• vite-template-react-plus – 基于Vite + React + TypeScript + ESLint + Prettier + Windi CSS + Visualizer 快速启动项目模板.
• vite-boilerplate – 带有 TypeScript、React、Storybook 和 Express 的全栈模板.
• reactjs-vite-tailwindcss-boilerplate – 基于 React, TypeScript, Jest, Testing Library, Tailwind CSS, ESLint + Prettier 模板.
• Tropical – 基于 React 和客户端 JS岛构建的快速、主要是 HTML 静态站点.
• vite-plugin-react-refresh – 为 @vitejs/plugin-react-refresh 提供增强功能.
• vite-reactts17-chakra-jest-husky – 基于 React 17, TypeScript, Chakra UI, Jest, ESLint, Prettier, Husky 构建的模板.
• react-ts-vite-template – 基于 React, TypeScript, Jest, Testing Library, Cypress, ESLint, Prettier, Husky 构建的模板.
• vite-reactts-tailwind-rtk-eslint – 基于Vite构建的React + TypeScript + Tailwind + RTK + eslint样板.
• vite-react-tailwind-template – 基于 React 17, TypeScript, Jest, ESLint, Prettier, Husky, Tailwind CSS, PostCSS, pnpm 工具.
• vite-react-ssr – 基于 Vite + React + React-router-dom、Tailwind CSS 2 JIT 的服务器端渲染项目模板.
• vite-material-ui – 用于 React、TypeScript 和 MUI 最新主要版本的 Vite 模板.
• stravital – 基于 React 17 + Vite + react-router-dom + react-icons + Prop-Types + Tailwind CSS 脚手架.
• vite-react-ts-tailwind-firebase-starter – 使用 Vite + React + TypeScript + Tailwind CSS (daisyUI) + Firebase (v9) + Prettier + ESLint 的启动器.
• vite-react-express-boilerplate – 带有 React 和 Express 的全栈模板.
• vite-react-express-docker-boilerplate – 带有 Docker、React 和 Express 的全栈模板.

Plugins

集成插件

• vite-plugin-pwa – 零配置 PWA.
• vite-plugin-windicss – Windi CSS 集成.
• vite-plugin-node – 与 Node.js 后端服务器集成.
• vite-plugin-cesium – 与Cesium库集成.
• vite-plugin-mpa – 开箱即用的多页应用程序（MPA）集成.
• vite-react-jsx – React 17 的自动 JSX 运行时为您的整个包.
• vite-plugin-spritesmith – 将一组图像转换为 spritesheet 和 SASS/LESS/Stylus 混合.
• vite-plugin-host – 允许您使用自定义域进行开发.
• vite-plugin-eruda – 帮助您在开发环境中自动打开调试工具.
• vite-plugin-linter – 可扩展的linter框架，在 Vite 输出和浏览器控制台中显示 linting 输出，包括 ESLint 和 TypeScript ootb.
• vite-plugin-checker – 在具有覆盖和终端提示的工作线程中快速运行检查器（TypeScript/VLS/vue-tsc 等）.
• vite-plugin-stimulus-hmr – 与 Stimulus 集成，支持 HMR.
• @nabla/vite-plugin-eslint – 在 worker 中异步运行 ESLint 以保持 HMR 快速.
• vite-plugin-relay – 允许使用Relay.
• vite-plugin-tauri – 将 Tauri 集成到 Vite 项目中以构建跨平台应用程序.
• vite-plugin-federation – 支持模块联合，受 Webpack 模块联合功能的启发.
• vite-plugin-wasm-pack – 与 rust wasm-pack集成，简单的方法.

Loaders

• unplugin-icons – 普遍按需访问数千个图标作为组件.
• vite-plugin-svg-icons – 快速创建 SVG 精灵.
• vite-plugin-rsw – 加载 rust-compiled (wasm-pack) WebAssembly 包.
• vite-imagetools – 使用 url 查询参数加载和转换图像.
• vite-plugin-radar – 多合一分析加载器（支持 7 多个提供商）.
• vite-plugin-virtual-plain-text – 此插件将虚拟资产路径文件解析为针对项目根目录的本地文件路径.
• vite-plugin-monaco-editor – Monaco Editor编辑器集成.
• vite-tsconfig-paths – 提供vite使用 TypeScript 的路径映射解析导入的能力。.
• vite-plugin-faker – 使用 TypeScript 编译器生成模拟数据.
• vite-plugin-style-import – 按需引入组件库样式.
• vite-plugin-mock – 用于开发和生产的模拟插件.
• vite-plugin-mocker – Mocker vite 插件.
• vite-plugin-theme – 动态改变主题颜色.
• vite-aliases – 基于项目结构自动生成别名.
• vite-plugin-import – 模块化导入插件.
• vite-plugin-imp – 按需导入库组件样式，使您的应用程序更苗条.
• view-launcher – 检查 Vue 组件并直接从浏览器跳转到源代码.
• vite-plugin-mkcert – 提供证书 https 开发服务器.
• vite-plugin-vconsole – 帮助开发人员使用 vconsole 来方便移动开发和调试.
• vite-plugin-cdn-import – 从 CDN 导入包.
• vite-dts – .d.ts为库生成模块的快速插件.
• vite-plugin-externals – 从输出包中排除依赖项.
• vite-plugin-async-catch – 自动注入异步函数的 try catch 代码.
• vite-plugin-mock-server – Mock 服务器插件，支持使用 TS 和 JS 编写 Mock API 和 HMR.
• vite-plugin-dynamic-publicpath – 使用动态导入处理程序更改运行时公共基本路径，如 Webpack 的__webpack_public_path__.
• vitawind – 自动安装和设置 Tailwind CSS.
• vite-plugin-restart – 在文件更改时重新启动 Vite 服务器.
• vite-plugin-full-reload – 在文件更改时重新加载浏览器.
• vite-plugin-tips – 在页面上提供更好的开发服务器状态提示.
• vite-plugin-vars-modifier – 从 css 预处理器文件转换变量.
• unplugin-auto-import – 按需 API 自动导入.
• vite-plugin-inspect – 检查 Vite 插件的中间状态.
• vite-plugin-proxy-middleware – 插件允许您同时打开proxy和h2选项.

Bundling

• vite-plugin-compress – 一个vite压缩插件.
• vite-plugin-imagemin – vite图片压缩插件.
• vite-plugin-importer – babel-plugin-import 的捆绑包.
• vite-plugin-banner – 注释生成器.
• vite-plugin-compression – 使用 gzip 或 brotli 压缩资源.
• rollup-plugin-critical – 用于生成关键 CSS.
• vite-plugin-dts – 从lib.ts或.vue源文件生成声明文件.
• vite-plugin-multi-device – 用于多个设备构建的 Vite 插件.
• vite-plugin-vue-docs – 分析 vue 组件以自动生成可预览文档.

扩展插件

• vite-plugin-html – 一个针对 index.html，提供压缩和基于 ejs 模板功能的 vite 插件.
• vite-plugin-ts-nameof – 让Vite能够在 TypeScript 中解析 nameof调用.
• vite-plugin-handlebars – Vite 对 Handlebars 的支持.
• vite-plugin-html-config – 这个插件帮助我们配置额外的html，可以通过不同的环境注入不同的脚本.
• vite-plugin-html-template – vite 应用程序的 HTML 模板，如 webpack 的 html-webpack-plugin，它与vite-plugin-mpa完美配合.
• vite-plugin-md2vue – 将 markdown 模块转换为 Vue 组件.
• vite-plugin-virtual-html – 使 Vite MPA 与@vue/cli.
• vite-plugin-posthtml – 运行PostHTML 的Vite 插件。目前仅在服务/构建的 HTML 文件上运行index.html.
• vite-plugin-plain-text – Vite 插件将匹配规则的文件转换为纯文本.
• vite-plugin-virtual-html-template – HTML 模板，支持灵活的虚拟 URL.
• vite-plugin-require-context – 支持require.context中vite.
• vite-remark-html – 将.md导入转换为 HTML 字符串.
• vite-plugin-commonjs – 支持 CommonJS 到 ESM.
• vite-plugin-content – 转换yaml，xml，ini，toml，csv，plist和properties文件ES6模块.
• vite-plugin-require – require通过代码转换支持的Vite 插件.
• vite-plugin-css-modules – 支持的 vite 项目可以使用 css 模块，而不仅仅是.module.xxx.
• vite-plugin-macro – 为基于 Vite 的项目带来宏功能.
• vite-plugin-global-style – 处理 CSS、SASS、LESS 和 Stylus 的全局样式.
• vite-plugin-shared-modules – 在 monorepos 中共享 node_modules.

Testing

• mocha-vite-puppeteer – 使用 Vite 捆绑器和 Puppeteer 浏览器启动器运行您的 Mocha 前端测试.
• vite-plugin-test – Headless 的Vite 插件测试您的Vue,React和Lit-Element组件.
• vite-web-test-runner-plugin – 一个用于测试 Vite 驱动项目的@web/test-runner插件。这个插件会自动连接到当前目录下的 Vite 项目，加载项目配置，并使用你已经配置好的 Vite 构建管道来构建每个测试文件.