开发者自建 Vue 3 项目脚手架，集成测试与 API Mock

译注：本文编译自 dev.to 平台文章《I Built My Own Vue 3 Project Starter》，作者 hdJerry，原文发布于 2026 年 9 月 24 日。原文链接：https://dev.to/hdjerry/i-built-my-own-vue-3-project-starter-590k

一位开发者将自己日常手动搭建的 Vue 项目配置整理成了一个可复用的脚手架模板，用于为项目提供统一的开发、测试、API Mock 与组件组织基础。该项目已在 GitHub 开源，并可通过 npx 直接创建新项目。

快速开始

脚手架的使用方式如下：

npx create-vue-starter-with-test my-app
cd my-app
yarn dev

作者表示，这个项目的目标很直接：让 Vue 项目从一个已经配置好常用结构和工具链的起点开始，而不必每次手动重复搭建。

技术栈

该脚手架包含以下技术选型：

• Vue 3
• Vite
• TypeScript
• 单元测试
• API Mock
• Prettier
• 受 Atomic Design 启发的组件组织方式

这套组合为新项目提供了基础的开发与测试环境，无需从零配置。

组件架构

项目的主要架构决策之一，是采用 Atomic Design 的理念来组织组件。目录结构如下：

src/
└── components/
    ├── atoms/
    ├── molecules/
    ├── organisms/
    └── templates/

其核心思路是按组件的组合层级进行划分：

• Atoms（原子）：小型、可复用的 UI 元素。
• Molecules（分子）：将原子组合成更具体的 UI 组件。
• Organisms（有机体）：将多个组件组合成界面中更大的区块。
• Templates（模板）：定义页面级布局与组合方式。

作者认为，这种结构在应用规模增长时能提供可预期的组织方式，也让可复用组件更容易被识别。

测试与 API Mock

测试被直接纳入脚手架，而非事后补充。项目提供了编写单元测试所需的初始配置。作者表示，从一开始就具备测试基础设施，有助于把测试视为开发工作流的一部分，而不是后期才引入的独立任务。

脚手架同时内置了 API Mock 能力，使前端开发不必在每个场景下都依赖真实后端。在构建组件和测试应用行为时可以使用模拟响应，这在前后端并行开发时尤为实用。

为什么选择 npx

作者希望这个项目更像一个开发工具，而不是一个需要克隆并手动配置的仓库。预期的工作流就是通过 npx create-vue-starter-with-test my-app 直接生成新项目并立即开始开发。这也意味着脚手架的改进可以通过后续版本分发，而不需要开发者手动从仓库复制变更。

组件结构的构建

Atomic Design 结构是通过 PR #7 引入的，该变更确立了 atoms、molecules、organisms 和 templates 之间的初步划分。作者希望这套架构鼓励组合与复用，而不是每新增一个功能就引入一个孤立的组件。结构被有意保持简单，可以随应用发展而调整，而不是试图在脚手架阶段解决所有架构问题。

经验总结

作者提到，构建这个脚手架让他更仔细地思考了项目基础应该包含什么。一个脚手架应当提供有用的默认值，但不能过于强势，以至于开发者花在绕过它上的时间比使用它还多。

因此，有些内容适合放进基础：开发工具链、测试、格式化、API Mock、基础组件组织。而另一些决策则更适合留给应用本身。作者认为，这种平衡是构建可复用脚手架过程中最有意思的部分。

后续计划

项目已在 GitHub 开源，作者计划在使用和收到反馈的过程中持续改进。仓库地址：https://github.com/hdJerry/vue-starter

作者也向 Vue 开发者提问：你通常会在自己的项目脚手架中放入哪些内容？又会为这个项目补充什么？

原文链接

• https://dev.to/hdjerry/i-built-my-own-vue-3-project-starter-590k