vitesse

Vitesse 是由 Anthony Fu 创建的一个高度预设的启动模板，用于使用 Vite 和 Vue 3 构建 Web 应用。它旨在提供一个快速、预配置的设置，使开发者无需花费时间在配置上即可快速将想法转化为可用的应用。该模板专为速度设计，利用 pnpm、esbuild 和 Vite 等现代工具，并包含一套精选的功能和插件，开箱即用。 **主要特性** - **Vue 3 + Vite**：基于最新的 Vue 3 和 Vite，提供快速的开发和构建时间。 - **基于文件的路由**：使用 `unplugin-vue-router` 从 `src/pages` 目录自动生成路由。 - **自动导入**：组件、API（如 Composition API）和图标自动导入，减少样板代码。 - **状态管理**：使用 Pinia 进行直观、类型安全的状态管理。 - **布局系统**：通过 `vite-plugin-vue-layouts` 支持多种布局。 - **PWA 支持**：集成 `vite-plugin-pwa`，提供渐进式 Web 应用能力。 - **样式**：使用 UnoCSS 实现即时按需原子 CSS，并通过 Iconify 支持任何图标集。 - **国际化**：使用 Vue I18n 和 `unplugin-vue-i18n` 支持多语言。 - **Markdown**：使用 `unplugin-vue-markdown` 将 Markdown 编写为 Vue 组件，并支持 Shiki 语法高亮。 - **SSG**：通过 `vite-ssg` 实现静态站点生成，并使用 `beasties` 进行关键 CSS 优化。 - **测试**：使用 Vitest 进行单元测试，Cypress 进行 E2E 测试，并与 GitHub Actions 集成。 - **TypeScript**：完全支持 TypeScript。 - **部署**：零配置部署到 Netlify，并提供 Docker 支持用于生产构建。 **预装插件** - Vue Router、Pinia、VueUse、用于头部管理的 Unhead，以及用于增强开发者体验的 `vite-plugin-vue-devtools`。 - 使用 `@antfu/eslint-config` 通过 ESLint 强制执行编码风格（单引号，无分号）。 - 推荐 VS Code 扩展，包括 Vite、Volar、Iconify IntelliSense、i18n Ally 和 ESLint。 **变体** 该模板启发了多个社区维护的变体，包括： - `vitesse-lite`：轻量级版本。 - `vitesse-nuxt3`：用于 Nuxt 3。 - `vitesse-webext`：用于浏览器扩展。 - `vitesse-ssr-template`：支持 SSR。 - `vitailse`：使用 TailwindCSS。 - `vitesse-h5`：用于移动应用。 - `vitesse-solid`：用于 SolidJS。 **使用方法** - **开发**：运行 `pnpm dev` 并访问 `http://localhost:3333`。 - **构建**：运行 `pnpm build` 生成 `dist` 文件夹。 - **部署**：连接仓库部署到 Netlify，或使用 Docker：`docker buildx build . -t vitesse:latest`，然后运行 `docker run --rm -it -p 8080:80 vitesse:latest`。 **注意**：作者建议新项目使用 Nuxt，因为其 Vue 开发者体验更好且维护更一致，而 Vitesse 来自 Vite/Vue 3 过渡早期，更新可能较慢。不过，它仍然是学习和符合其预设设置项目的可靠参考。 **自定义清单** 使用模板时，请更新 `LICENSE` 中的作者姓名、`App.vue` 中的标题、`vite.config.ts` 中的主机名、`public` 中的 favicon，删除 `.github` 文件夹，并清理 README 和路由。 总体而言，Vitesse 是一个功能强大、特性丰富的启动模板，适合希望为 Vue 3 应用获得全面、预设设置的开发者，重点关注速度和开发者体验。