在 Vue 生态中，如何高效地启动一个功能齐全、结构清晰的前端项目，是每个开发者都会面临的问题。Vue 官方为此提供了现代化脚手架工具 —— create-vue，用于快速创建基于 Vite 的 Vue 3 项目。它功能简洁、模块化清晰，是目前最推荐的 Vue 项目初始化方式。
不过，create-vue 在“开箱即用”之余，也有一定的局限性：比如缺少请求模块封装、UI 框架集成、CSS 原子化工具等实用功能，仍需要开发者在项目创建后手动配置。
为了解决这一问题，在 create-vue 的基础上扩展出了一个的增强版脚手架工具 —— create-vtems。
🧰 什么是 create-vtems？
create-vtems 是一个基于 create-vue 的增强型 Vue 项目初始化工具。它在保持官方原生体验的基础上，集成了日常开发中最常用的一系列插件、框架和工具配置，旨在帮助开发者一键生成更贴近真实业务需求的 Vue 项目模板。
其核心理念是：更少的手动配置，更快的项目落地。
✨ 支持的功能选项
在使用 create-vtems 创建项目时，你将拥有如下灵活配置选项：
✅ 核心能力
- ✔ 使用 TypeScript 与否
- ✔ 是否启用 JSX 支持
- ✔ 是否集成 Vue Router
- ✔ 是否使用 Pinia 进行状态管理
- ✔ 是否启用 ESLint 进行代码规范检查
🌐 网络请求封装
- ✔ 支持集成基于 Axios 的
http封装模块 - ✔ 自动生成
api接口目录
这对于日常的接口调用来说极为方便，减少了重复造轮子的步骤。
🧱 UI 组件库集成
根据不同场景需求，支持以下 UI 库的快速集成：
只需在初始化时勾选即可自动完成依赖安装与配置导入。
同时支持ui是否配置按需加载。
🎨 样式与原子 CSS 框架
- ✔ 支持 CSS 预处理器：Less、Sass/SCSS、Stylus
- ✔ 支持集成原子化 CSS 框架：Tailwind CSS 或 UnoCSS
这些配置将极大提升样式开发效率，并增强代码的可维护性。
🧪 测试能力
- ✔ 可选单元测试工具：Vitest
- ✔ 可选端到端测试工具：Cypress、Nightwatch、Playwright
⚙️ 如何使用？
使用 create-vtems 十分简单，只需三步：
npm install -g create-vtems
create-vtems
# 根据 CLI 提示选择功能
或者
npm create vtems
or
pnpm create vtems
这样就可以获得一个具备完整功能、结构清晰的 Vue 项目。
🙋♂️ 谁适合使用 create-vtems？
- 对 Vue 比较熟悉，希望减少重复搭建时间的开发者
- 希望统一技术栈配置、降低团队维护成本的前端团队
- 想快速集成 UI 库、网络请求、CSS 工具和测试环境的项目
❤️ 向 create-vue 致敬
create-vtems 的一切能力，都建立在 Vue 官方脚手架 create-vue 的优秀设计之上。感谢 Vue 团队提供如此清晰、强大的项目基础架构。create-vtems 正是站在它的肩膀上，进一步扩展出了更加贴近实际开发的项目模板选项。
✨配置列表
完整配置列表
✔ 项目名称：… <你的项目名称>
✔ 添加 TypeScript 支持？… 否 / 是
✔ 添加 JSX 支持？… 否 / 是
✔ 为单页应用开发添加 Vue Router？… 否 / 是
✔ 添加 Pinia 进行状态管理？… 否 / 是
✔ 添加axios接口请求？… 否 / 基于axios的http和api文件极轻量封装
✔ 添加ui支持？… 否 / element-plus / @arco-design/web-vue / vant
✔ 添加css预处理器支持？… 否 / less / scss|sass / styl|stylus
✔ 添加css原子化支持？… 否 / TailwindCSS / UnoCSS
✔ 添加 Vitest 进行单元测试？… 否 / 是
✔ 添加端到端测试解决方案？… 否 / Cypress / Nightwatch / Playwright
✔ 添加 ESLint 保障代码质量？… 否 / 是
✔ 添加 Prettier 进行代码格式化？… 否 / 是
正在 ./<你的项目名称> 目录中创建项目...
完成。
新增以下配置：
✔ 添加axios接口请求？… 否 / 基于axios的http和api文件极轻量封装
✔ 添加ui支持？… 否 / element-plus / @arco-design/web-vue / vant
✔ 添加css预处理器？… 否 / less / scss|sass / styl|stylus
✔ 添加css原子化支持？… 否 / TailwindCSS / UnoCSS
📌 总结
create-vtems 是一款极具开发效率提升意义的 Vue 脚手架工具。它不仅继承了 create-vue 的简洁与现代化，还为开发者提供了更多可选功能，让项目初始化更贴合业务需求、更具扩展性。
如果你是一名 Vue 开发者，不妨亲自试试 create-vtems，让你的项目搭建过程更加丝滑高效。
👉 项目地址：github.com/zstings/cre…
