Vue 项目有多种创建方式，从“一行命令生成完整工程”到“一个 script 标签直接开写”，覆盖了从轻量试验到企业级应用的所有场景。以下是当前主流的三种方案及其适用场景。
方案一：Vite 创建 Vue 3 项目（当前主流方案）
Vite 是 Vue 官方推荐的下一代前端构建工具，它利用浏览器原生 ES Module 支持实现极速冷启动和热更新。创建项目只需一行命令：
# npm
npm create vue@latest
# pnpm
pnpm create vue@latest
# yarn
yarn create vue执行后会进入交互式配置，让你选择是否需要 TypeScript、JSX、Vue Router、Pinia、Vitest 等特性。它会自动生成一个开箱即用的项目目录，包含以下核心文件：
my-project/
├── index.html # 入口 HTML，Vite 从这里开始
├── package.json
├── vite.config.js # Vite 配置文件
├── src/
│ ├── main.js # 应用入口，创建并挂载 Vue 实例
│ ├── App.vue # 根组件
│ └── components/ # 组件目录为什么 Vite 是主流：
- 极快的开发体验：冷启动几乎瞬间完成，热更新（HMR）在几十毫秒内生效，改完代码切回浏览器就已经更新好了。
- 原生 ESM 开发：开发阶段直接使用浏览器支持的 ES Module，不用打包，调试时错误定位更精确。
- 生产构建基于 Rollup：输出的生产包高度优化，Tree Shaking 彻底。
- Vue 官方深度集成：对
.vue文件、模板编译、HMR 都有最优支持。
适用场景：所有新建的 Vue 3 项目，无论是小型 Demo 还是大型企业级应用，都应首选 Vite。它是当前生态的标准答案。
方案二：Vue CLI 脚手架
Vue CLI 是 Vue 2 时代的标准工具，基于 Webpack 构建。目前仍广泛存在于存量项目和老项目中。安装与创建方式：
npm install -g @vue/cli
vue create my-project它会提供一套预设选项（Babel、ESLint、CSS 预处理器等），生成的目录结构与 Vite 版本类似，但配置集中在 vue.config.js 中，构建引擎是 Webpack。
Vue CLI 的当前定位：
- 对于 Vue 2 项目，Vue CLI 仍然是标配工具。
- 如果你所在的团队对 Webpack 有深度定制需求（如复杂的 loader 链），且不追求 Vite 的开发速度，Vue CLI 也可用来创建 Vue 3 项目。但官方已明确表示 Vite 是未来方向，新项目不再推荐使用 CLI。
适用场景：维护基于 Webpack 的遗留项目；或团队暂未迁移至 Vite 但需要用 Vue 3 的过渡阶段。对于新启动的项目，直接上 Vite 更省心。
方案三：浏览器直接引入 CDN（轻量用法）
如果项目仅需要一个简单的动态交互区域（例如在已有的后端渲染页面中嵌入一个带反馈的表单），无需完整工程化体系，可以直接在 HTML 中通过 CDN 引入 Vue：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue CDN 示例</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="reverseMessage">翻转消息</button>
</div>
<!-- 引入 Vue 3 全局构建版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello Vue 3!')
function reverseMessage() {
message.value = message.value.split('').reverse().join('')
}
return { message, reverseMessage }
}
}).mount('#app')
</script>
</body>
</html>这个方案的特点：
- 零构建步骤：不需要安装 Node.js，不需要配置任何工具链，一个浏览器就能跑。
- 渐进式引入：可以在不改变原有项目技术栈的前提下，只让某个
div享受 Vue 的响应式能力。 - 体积可控：
vue.global.prod.js的 CDN 版本经过压缩，约 40KB（gzip 后约 15KB），对页面性能影响很小。 - 功能完整：依然可以使用模板语法、指令、组件、生命周期等 Vue 全部核心特性，只是缺少单文件组件（
.vue）、路由、状态管理等需要构建工具支持的能力。
适用场景：快速原型验证、静态站点局部动态增强、教学演示、不想引入构建工具的老项目渐进式改造。当你需要组件化、模块化时，再平滑升级到 Vite 方案。
如何选择
- 新项目、需要工程化：直接 Vite。
- 维护老项目，而且是 Vue 2：继续用 Vue CLI，直到下次重构。
- 只是一个页面小功能，或者想最快试一下 Vue：CDN 引入，5 分钟搞定。