Vitesse:antfu 的 Vue 3 脚手架模板
文章目录Vitesseantfu 的 Vue 3 脚手架模板1、 模板里都装了啥2、 为什么要用这种模板3、 衍生版本4、 怎么用5、 适合谁用Vitesseantfu 的 Vue 3 脚手架模板Vitesse 在 GitHub 上拿到 9.4K Star 了。antfu-collective 维护的这个项目定位是一个 opiniated 的 Vite 启动模板把 Vue 3 生态里常用的工具链按一套约定配好开发者克隆下来直接写业务不用再花时间调配置。1、 模板里都装了啥作者明确说这是 Vue 3 早期过渡阶段的产物现在他更推荐用 Nuxt 走 SPA 或 SSG。模板本身还在维护但更新节奏会慢一些。技术栈选型基本是 antfu 一贯的口味构建工具 Vite包管理 pnpm打包用 esbuild路由基于文件系统自动生成组件按目录自动 import状态管理用 PiniaCSS 引擎用 UnoCSSPWA、I18n、Markdown 渲染、组件预览都内置单元测试 VitestE2E 测试 Cypress部署 Netlify 零配置script setup语法是默认的TypeScript 全程支持ESLint 走 antfu/eslint-config 的规则集单引号、不写分号。2、 为什么要用这种模板写过 Vue 项目的人都遇过这种情况拉一个空项目下来配置路由、装状态库、加 ESLint、配 PWA、调 UnoCSS半天时间搭环境就过去了。每个项目都这么搞一遍重复且没收益。Vitesse 把这层体力活打包好了。开箱即用要改风格也可以直接动配置。作者在 README 里说得很直白模板是 strongly opinionated 的不认同就 fork 一份自己改。3、 衍生版本模板有官方和社区两套分支针对不同场景做了裁剪vitesse-lite精简版去掉 SSG 等较重的部分vitesse-nuxt3迁移到 Nuxt 3 的版本vitesse-webext做浏览器扩展用的vitesse-h5移动端 H5 适配版vitailse把 UnoCSS 换成 TailwindCSS 的社区版作者也欢迎大家提 PR 加新分支列在 README 的 Variations 一段里。4、 怎么用要求 Node 版本不低于 14.18。本地克隆npx degit antfu-collective/vitesse my-vitesse-app cd my-vitesse-app pnpm i开发运行访问http://localhost:3333pnpm dev构建产物pnpm build部署直接走 Netlify导入仓库一路点 OK 就能上线。需要走 Docker 的话作者也给了构建命令和端口映射示例。5、 适合谁用做个人项目、做演示 Demo、想快速把一个 Vue 3 想法跑起来的人。antfu 自述出发点就是他自己经常要起 Vite 应用每次配环境太烦干脆做个模板自己用顺手分享出来。如果是企业级团队项目要考虑多人协作、统一编码风格、长期维护这个模板可能口味太重挑需要的部分借出来用更合适。自己用顺手分享出来。如果是企业级团队项目要考虑多人协作、统一编码风格、长期维护这个模板可能口味太重挑需要的部分借出来用更合适。