create-vue 是 Vue 官方推出的 Vue 3 工程化脚手架，用于快速初始化基于 Vite 的现代 Vue 项目。它替代了 Vue CLI 在 Vue 3 生态中的默认地位，核心设计目标是轻量、可组合与易定制。与以往通过插件机制在生成后修改文件不同，create-vue 在生成阶段就通过模板与用户选择直接产出最终代码。
create-vue 的核心工作原理
create-vue 的入口是一个基于 Node.js 的命令行程序。当用户运行 npm create vue@latest 时，实际会下载并执行 create-vue 包中的可执行文件。该程序首先通过交互式命令行工具向用户提出一系列问题，例如是否需要 TypeScript、是否使用 JSX、是否引入 Vue Router 与 Pinia 等。这些问题的答案会被收集为一个配置对象，作为后续模板渲染的数据源。
在拿到用户配置后，create-vue 会读取内置的模板目录。模板并不是简单的静态文件复制，而是采用了类似 EJS 的渲染逻辑：文件中的特定占位符会根据配置对象被替换为实际内容，或者整段文件根据条件决定是否输出。例如当用户选择使用 TypeScript 时，模板中的 main.ts 会被写入，而 main.js 则被忽略。最终，渲染后的文件树被写入到用户指定的目标文件夹中，并自动执行依赖安装提示。
// 模拟 create-vue 的配置收集与模板渲染简化逻辑
const prompts = require('prompts');
const fs = require('fs');
const path = require('path');
async function run() {
const config = await prompts([
{
type: 'toggle',
name: 'typescript',
message: '是否使用 TypeScript？',
initial: true,
active: '是',
inactive: '否'
},
{
type: 'toggle',
name: 'router',
message: '是否引入 Vue Router？',
initial: false,
active: '是',
inactive: '否'
}
]);
// 根据配置决定复制哪些模板文件
const tplDir = path.join(__dirname, 'template');
const targetDir = path.join(process.cwd(), 'my-vue-app');
if (config.typescript) {
fs.copyFileSync(path.join(tplDir, 'main.ts'), path.join(targetDir, 'src/main.ts'));
} else {
fs.copyFileSync(path.join(tplDir, 'main.js'), path.join(targetDir, 'src/main.js'));
}
console.log('项目已生成');
}
run();
模板结构与特性组合机制
create-vue 的模板目录按照功能特性进行拆分，每个特性拥有独立的子模板。比如路由相关文件放在 router 子目录，状态管理相关放在 stores 子目录。这种拆分让脚手架在渲染时只需根据用户勾选情况，将对应子目录合并进最终项目，而不必维护多个庞大的完整模板。该方式显著降低了模板维护成本，也方便社区贡献新特性。
特性之间还存在依赖关系与互斥逻辑。举例来说，如果用户选择了 Vitest 做单元测试，脚手架会自动调整 package.json 中的脚本与依赖，并确保测试工具链与所选的 TypeScript 或 Babel 配置兼容。这种组合机制通过模板中的条件渲染片段实现，而非生成后再用脚本修补，从而保证了输出项目的整洁与可预测性。
| 特性选项 | 对应模板产物 | 主要依赖 |
|---|---|---|
| TypeScript | tsconfig.json、main.ts | typescript、vue-tsc |
| Vue Router | src/router/index.ts | vue-router |
| Pinia | src/stores/ | pinia |
如何定制自己的 create-vue 脚手架
在团队开发中，常常需要统一代码规范、目录结构与 CI 脚本。此时可以直接 fork create-vue 的源码仓库，修改其 template 目录与提示问题。比如将默认的 ESLint 配置替换为团队内部的共享配置包，或在模板中预置常用的 axios 封装与布局组件。修改后发布为私有 npm 包，即可通过 npm create your-scope/your-vue 使用。
另一种轻量定制方式是不修改脚手架本身，而是基于 create-vue 生成的项目再抽象一层。团队可维护一个“项目基座”仓库，里面包含统一的规范文件，新项目从该基座拉取后再用 create-vue 补充业务特性。这种方案避免了长期跟进官方脚手架更新，同时保留了官方最佳实践。需要注意的是，定制时应保持模板中条件渲染逻辑的清晰，防止多个私有特性互相冲突导致生成失败。
<!-- 定制模板中的条件片段示例：仅当选择 Pinia 时输出 -->
<% if (options.pinia) { %>
import { createPinia } from 'pinia';
app.use(createPinia());
<% } %>
与旧版 Vue CLI 的差异及迁移建议
Vue CLI 基于 webpack，通过插件在生成后修改文件，启动慢且配置复杂。create-vue 基于 Vite，生成阶段即确定最终结构，没有运行时插件体系。对于老项目，官方建议新建 create-vue 项目并将源码逐步迁移，而非使用迁移工具强行转换。这样能充分利用 Vite 的按需编译与更简单的依赖管理。
从工程化角度看，create-vue 更契合现代前端“约定优于配置”的思路。它将决策点前置到初始化问答中，让每个新项目从诞生起就具备一致的可维护性。团队在采用时，应把定制重点放在模板而非流程，避免重新发明交互逻辑，从而以最小成本享受官方持续迭代带来的收益。
create-vueVue3_scaffoldingproject_customization修改时间：2026-08-11 22:42:41