awesome-vite - ⚡️ 与 Vite.js 相关的精彩内容的精选列表

很棒的 Vite.js

与Vite.js相关的精彩内容的精选列表

目录

使用左上角的“目录”菜单浏览列表。

资源

官方资源

• 文档
• GitHub 仓库
• 发行说明
• Vue 3 文档
• 很棒的 Vue
• 从 v1 迁移

开始

• create-vite -搭建你的第一个 Vite 项目。
• create-vite-pwa - 与 相同的脚手架选项

  create-vite

  ，但具有开箱即用的PWA支持。

模板

Vanilla

• vit-singlefile-gzip - 嵌入的 Vite Starter 模板。

视图 3

• Vitesse - 自以为是的入门模板。
• vite-vue3-tailwind-starter -Vue 3、Vue Router 和 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 进行后端和前端的电子应用程序，具有自动发布功能。
• vue-vben-admin - 基于 Vue3、Ant-Design-Vue、TypeScript 的后台管理模板。
• Electron-vue-next - Vue 3 和 Electron 与 VS Code 调试和 GitHub 发布过程开箱即用。
• vite-electron-ts -Electron 12、Vue 3 和 TypeScript。
• vue-pure-admin - 基于 Vue3、TypeScript、Tailwind CSS、element-plus 的后台管理模板。
• vite-electron-typescript-template -Electron 12 TypeScript 模板。
• vite-ts-quick -Vue 3 + Vuex + Vue-router + TypeScript 快速模板。
• fast-crud - 面向选项的 crud 框架，以闪电般的速度开发 crud。
• vivu - 自以为是的可扩展 vue 样板。
• electron-vite-quick-start - 全栈使用 Vite 来运行 Electron 应用程序，包括主进程。
• NeuVite - 带有Neutralino.js 的桌面应用程序模板
• vue3-SSR-starter - Vue3-SSR，使用一行代码预取和同步状态到客户端。
• 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 - Vue3 + TypeScript + WindiCSS + Vue Router 4、i18n 和 Iconify.
• vitesse-lite - Vitesse 的轻量级版本。
• vitesse-webext - WebExtension Vite 入门模板。
• Vitesse SSR - 基于 Vitesse 的服务器端渲染。部署到 Vercel 或任何 Node.js 环境。
• Vitesse Edge - 基于 Vitesse 的边缘侧渲染，由 Vitedge 提供支持。部署到 Cloudflare Workers。
• vite-ts-vue3-todo -Vue3 + TS + Vue-Router4 + Pania2 模板。
• vue-component-template - 用于创建自己的 Vue3 TSX 组件的模板。
• vite-vue3-tsx-starter - Vite、Vue 3 和 Tsx.
• fast-vite-electron - Vue3 + 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。

视图 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 的入门模板。
• 维生素- 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。
• vite-template-react - 一个创建 React 应用程序的模板。
• 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.
• vite-boilerplate - 带有 TypeScript、React、Storybook 和 Express 的全栈模板。
• reactjs-vite-tailwindcss-boilerplate -React，TypeScript，Jest，测试库，Tailwind CSS，ESLint 和 Prettier.
• Tropical - React、Storybook、MDX、Fela、SSR 预渲染和岛屿架构。
• 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，测试库，Cypress，ESLint，Prettier，Husky。
• vite-reactts-tailwind-rtk-eslint - React，TypeScript，Tailwind CSS，Redux Toolkit，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 -Material UI v5，TypeScript，暗模式切换。
• stravital - React 17 + Vite +

  react-router-dom

  +

  react-icons

  + Prop-Types + Tailwind CSS with JIT.
• 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 的全栈模板。
• vite-react-ts-starter -React，TypeScript，Jest，ESLint，Prettier，TailwindCSS，Husky，Conventional Commits。
• vite-react-tailwind-jit - 配置 TailwindCSS 的 React 。
• 重要- React、TypeScript、Tailwind (JIT)、CSS-Modules、Jest、Atomic Design、Prettier、Husky、Commit-lint。
• vite-react-electron - Vite + React + Electron 模板。

苗条

• sttv - Svelte、Tailwind CSS、TypeScript。
• svelte-vite-ssr - 支持 SSR 的 Svelte。
• svelte-vite-starter - Svelte、TypeScript、SCSS、Babel 和 HMR 的下一个模板。
• svelte kit - 构建 Svelte 应用程序的最快方法。

榆树

• vite-elm-template - 用于构建 Elm 应用程序的默认模板。

秘银

• mithril-vite-starter - Mithril 项目的模板。
• mithril-ts-vite-starter - 使用 TypeScript 的 Mithril 项目模板。

插件

与框架无关的插件

集成

• 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 - Allow you to use the custom domain for development.
• vite-plugin-eruda - Help you automatically open debugging tools in the development environment.
• vite-plugin-linter - Extensible linter framework that shows the linting output in the Vite output and the browser console, includes ESLint & TypeScript ootb.
• vite-plugin-checker - Fast run checkers (TypeScript/VLS/vue-tsc, etc.) in worker threads with overlay and terminal hint.
• vite-plugin-stimulus-hmr - Integration with Stimulus enabling HMR.
• @nabla/vite-plugin-eslint - Runs ESLint asynchronously in a worker to keep HMR fast.
• vite-plugin-relay - Allows for the usage of Relay.
• vite-plugin-tauri - Integrate Tauri in a Vite project to build cross-platform apps.
• vite-plugin-federation - Support Module Federation, Inspired by Webpack Module Federation feature.
• vite-plugin-wasm-pack - Integration with rust wasm-pack, the simple way.
• vite-plugin-comlink - Use WebWorkers with the power of Comlink to make them enjoyable.
• vite-plugin-sass-dts - This is a plugin that automatically creates a type file when using the CSS module type-safely.
• vite-esbuild-typescript-checker - Type checker (TypeScript, Vue SFC, etc.) based on the webpack 5 plugin.
• vite-plugin-simple-gql - Easily import .graphql and .gql files.
• vite-plugin-ali-oss - Upload the production files bundled in the project to Ali OSS, except for HTML.

Loaders

• unplugin-icons - Access thousands of icons as components.
• vite-plugin-svg-icons - Fast creating SVG sprites.
• vite-plugin-rsw - Load rust-compiled (wasm-pack) WebAssembly packages.
• vite-imagetools - Load and transform images using url query parameters.
• vite-plugin-radar - All in one analytics loader (with 7+ providers supported).
• vite-plugin-virtual-plain-text - Loads file as plain text from the virtual assets workspace.
• vite-plugin-monaco-editor - Monaco Editor integration.
• vite-plugin-svg-path-hot - Dynamic Created Svg Folder And Hot update.

Bundling

• vite-plugin-compress - Compress your bundle + assets.
• vite-plugin-imagemin - Compress image assets.
• vite-plugin-importer - Integration for babel-plugin-import.
• vite-plugin-banner - Adds a banner to the top of each generated chunk.
• vite-plugin-compression - Use gzip or brotli to compress resources.
• rollup-plugin-critical - Generate critical CSS.
• vite-plugin-dts - Generate declaration files from

  .ts

  or

  .vue

  source files for lib.
• vite-plugin-multi-device - Outputs for different devices.
• vite-plugin-vue-docs - Analyze vue components to automatically generate previewable documents.

Transformers

• vite-plugin-html - Plugin to minimize and use ejs template syntax in

  index.html

  .
• vite-plugin-ts-nameof - Ability to resolve nameof in TypeScript.
• vite-plugin-handlebars - Process HTML files with Handlebars.
• vite-plugin-html-config - HTML tag configuration, such as script link style meta favicon and more.
• vite-plugin-html-template - HTML template, like

  html-webpack-plugin

  for Webpack.
• vite-plugin-md2vue - Transform markdown module to Vue component.
• vite-plugin-virtual-html - Make Vite MPA consistent with

  @vue/cli

  .
• vite-plugin-posthtml - Vite plugin to run PostHTML. Currently only runs on served/built HTML files

  index.html

  .
• vite-plugin-plain-text - A Vite plugin transforms the rule-matched file as plain text.
• vite-plugin-virtual-html-template - HTML template, support flexible virtual URL.
• vite-plugin-require-context - Supports

  require.context

  .
• vite-remark-html - Transform

  .md

  imports into HTML strings.
• vite-plugin-commonjs - Support CommonJS to ESM.
• vite-plugin-content - Convert

  yaml

  ,

  xml

  ,

  ini

  ,

  toml

  ,

  csv

  ,

  plist

  and

  properties

  files to ES6 modules.
• vite-plugin-require - A Vite plugin that supports

  require

  by code transforming.
• vite-plugin-css-modules - vite projects to support can use css modules, Not just

  .module.xxx

  .
• vite-plugin-macro - Brings macro capabilities to Vite based projects.
• vite-plugin-global-style - Deal with global styles for CSS, SASS, LESS and Stylus.
• vite-plugin-shared-modules - Share node_modules in monorepos.
• vite-plugin-nunjucks - Nunjucks templating engine.
• vite-plugin-require-transform - Converts the code from require syntax to import.

Helpers

• vite-tsconfig-paths - Support for TypeScript's path mapping.
• vite-plugin-faker - Use TypeScript compiler to generate mock data.
• vite-plugin-style-import - Introduces component library styles on demand.
• vite-plugin-mock - Mock plugin for development and production.
• vite-plugin-mocker - Mocker server.
• vite-plugin-theme - Dynamically changing the theme color.
• vite-aliases - Alias auto-generation based on project structure.
• vite-plugin-import - Modular import plugin.
• vite-plugin-imp - Import library component styles on demand, make your app slimmer.
• view-launcher - Inspect Vue components and jump to source code directly from browsers.
• vite-plugin-mkcert - Provide certificates https dev server.
• vite-plugin-vconsole - Help developers use vconsole to facilitate mobile development and debugging.
• vite-plugin-cdn-import - Import packages from CDN.
• vite-dts - Blazing fast plugin that generates

  .d.ts

  modules for libraries.
• vite-plugin-externals - Exclude dependencies from the output bundles.
• vite-plugin-async-catch - Auto inject try catch code for async function.
• vite-plugin-mock-server - Mock server plugin, support using TS and JS to write Mock API and HMR.
• vite-plugin-dynamic-publicpath - Use dynamic import handler to change runtime public base path, like Webpack's

  __webpack_public_path__

  .
• vitawind - Install and Setting Tailwind CSS automatically.
• vite-plugin-restart - Restart the Vite server on file changes.
• vite-plugin-full-reload - Reload the browser on file changes.
• vite-plugin-tips - Provide better development server status tips on the page.
• vite-plugin-external - Better to define externals.
• vite-plugin-vars-modifier - Convert variables from css preprocessor file.
• unplugin-auto-import - On-demand API auto-importing.
• vite-plugin-inspect - Inspect the intermediate state of Vite plugins.
• vite-plugin-proxy-middleware - A Plugin allows you to turn on

  proxy

  and

  h2

  options at the same time.

Testing

• mocha-vite-puppeteer - Run your Mocha front-end tests with the Vite bundler and the Puppeteer browser launcher.
• vite-plugin-test - Mocha and puppeteer.
• vite-web-test-runner-plugin -

  @web/test-runner

  integration.

Vue

在本节中，我们使用徽章来指示每个插件的目标 Vue 版本。

仅适用于 Vue 2、仅适用于 Vue 3 以及与这两个版本兼容的插件。

💡SSR 框架在SSR- Frames 中列出。

集成

• @vitejs/plugin-vue - 官方 Vue 3 支持。
• vite-plugin-vue2 - Vue 2 集成。
• unplugin-vue2-script-setup -

  <script setup>

  为 Vue 2启用语法。

路由

• vite-plugin-pages - 基于文件系统的路由生成器。

装载机

• vite-plugin-md -Markdown作为 Vue 组件/Markdown 中的 Vue 组件。
• vite-plugin-vuedoc - 作为 Vue 预览组件的 Markdown 代码块。
• vite-svg-loader - 将 SVG 文件加载为 Vue 组件。
• vite-plugin-vue2-svg - 将 SVG 文件加载为 Vue 组件。

SSG

• vite-ssg - 服务器端生成。

生态系统

• vite-plugin-vue-i18n - Vue I18n 的集成。
• vite-plugin-i18n-resources - 加载 i18n 翻译消息文件。

帮手

• unplugin-vue-components - 按需组件自动导入。
• vite-plugin-vue-gql - Vue SFC 的 GraphQL 标签。
• vite-plugin-vue2-suffix - 兼容没有“.vue”后缀。

React

官方的

• @vitejs/plugin-react - React 项目的多合一 Vite 插件。

预设

• vite-preset-react - React 应用程序的所有预设 - HMR，自动 React 注入，在生产中删除 DevTools。

装载机

• vite-plugin-svgr - 将SVG转换为 React 组件。
• vite-plugin-mdx - 将 MDX 用于你的 Vite 应用程序，支持 MDX v1、MDX v2、HMR 和 SSR。

变形金刚

框架

• vite-plugin-react-pages - 用于构建 React 应用程序的 Vite 框架。
• @vitjs/vit - 受 UmiJS 启发的 React 应用程序框架。

💡SSR 框架在SSR- Frames 中列出。

坚硬的

集成

• vite-plugin-solid - 为 Solid 提供 JSX 转换。

榆树

集成

• vite-plugin-elm - 使你能够编译 Elm 模块的插件。

汇总插件

• Vite Rollup Plugins - 官方汇总插件的兼容性列表。

包含在 Vite 中

• @rollup/plugin-alias - Define and resolve aliases for bundle dependencies.
• @rollup/plugin-commonjs - Convert CommonJS modules to ES6.
• @rollup/plugin-dynamic-import-vars - Resolving dynamic imports that contain variables.
• @rollup/plugin-json - Convert

  .json

  files to ES6 modules.

Covered by default in Vite

• @rollup/plugin-babel - Compile your files with Babel.
• @rollup/plugin-buble - Compile ES2015 with buble.
• @rollup/plugin-data-uri - Import modules from Data URIs.
• @rollup/plugin-html - Create HTML files to serve Rollup bundles.
• @rollup/plugin-node-resolve - Locate and bundle third-party dependencies in node_modules.
• @rollup/plugin-sucrase - Compile TypeScript, Flow, JSX, etc with Sucrase.
• @rollup/plugin-typescript - Integration between Rollup and TypeScript.
• @rollup/plugin-wasm - Import WebAssembly code with Rollup.
• @rollup/plugin-url - Import files as data-URIs or ES Modules.

Compatible with Vite

• @rollup/plugin-beep - System beeps on errors and warnings.
• @rollup/plugin-dsv - Convert

  .csv

  and

  .tsv

  files into JavaScript modules with d3-dsv.
• @rollup/plugin-eslint - Verify entry point and all imported files with ESLint.
• @rollup/plugin-graphql - Convert .gql/.graphql files to ES6 modules.
• @rollup/plugin-image - Import JPG, PNG, GIF, SVG, and WebP files (needs

  enforce: 'pre'

  ).
• @rollup/plugin-inject - Scan modules for global variables and injects import statements where necessary.
• @rollup/plugin-legacy - Add export declarations to legacy non-module scripts.
• @rollup/plugin-replace - Replace strings in files while bundling.
• @rollup/plugin-strip - Remove debugger statements and functions from your code.
• @rollup/plugin-virtual - A Rollup plugin that loads virtual modules from memory.
• @rollup/plugin-yaml - Convert YAML files to ES6 modules.

Community

• Check the Awesome Rollup list for community-maintained rollup plugins, and refer to the Vite docs section about rollup plugin compatibility.

SSR

Libraries

• vite-ssr - Simplified Server Side Rendering with an SPA-like developer experience.
• vite-plugin-ssr - Like Nuxt/Next.js but as a do-one-thing-do-it-well plugin.

Frameworks

• vitedge - Edge-side rendering with fullstack utilities.
• vitext - The Next.js like React framework for better User & Developer experience.
• Rakkas - React framework inspired by Next.js and SvelteKit

Integrations with Backends

Adobe Experience Manager

• AEM Vite - Integration for Adobe Experience Manager and AEM SDK.

Craft CMS

• Craft Vite - 用于与 Craft CMS 集成的插件。

姜戈

• django-vite - Django 应用程序的集成。

Ruby on Rails

• vite-plugin-ruby - Ruby 后端的配置。
• Vite Ruby - Rails、Hanami、Padrino 和 Rack 应用程序的集成。

Laravel

• Laravel Vite - Laravel 框架的集成。

迁移

命令行界面

• vue-cli-plugin-vite - 在 Vue CLI 上使用 Vite，最大限度地减少代码库修改。
• wp2vite - 前端项目自动转换工具，让你的 Webpack 项目支持 Vite。
• webpack-to-vite - 将 webpack 项目转换为 vite 项目，还提供了转换细节以帮助你顺利迁移。

使用 Vite.js 的项目

开源

• VitePress - 由 Vite 和 Vue 提供支持的静态站点生成器。
• TroisJS - Three.js 与 Vite 和 Vue 3 的集成。
• Slidev - 面向开发人员的演示幻灯片。
• îles - 与 Vue3，多框架的交互岛。

应用程序/网站

• Icones - 具有即时搜索功能的图标浏览器。
• Awesome CN Café - Awesome CN Café 的Web 应用程序。
• Todo 示例- 具有路由和状态管理的 Todo 应用程序。
• npmview - 用于查看 npm 包文件的 Web 应用程序。
• Layoutit Grid - 交互式 CSS 网格布局生成器。
• aitrack.work - 日常使用的基于任务的时间跟踪器。
• Svelte 中的macOS - Svelte中 Web 的 macOS 桌面体验.
• vue3-realworld-example-app - 使用 Vue 3 + TypeScript + Composition API 的真实世界应用程序实现。
• vue3-ssr-realworld-example-app - 使用 Vue 3 和 SSR 的真实世界应用程序实现。
• react-device-frameset - 这是 React 的另一个设备框架集组件。
• vite-vue3-lowcode - 使用 Vue 3 + TypeScript + Composition API 的低代码平台。
• Death Star dashboard - 使用 Vue 3、TypeScript、Tailwind、Docker 构建 dashboard 的示例。
• Context Note - 由 Vue3 和 Vite 构建的笔记记录 chrome 扩展。