Vue3 安装
Vue3 的安装方式很灵活：既可以在 HTML 里用 CDN 一行引入，也可以用 npm 配合打包工具管理，还可以用官方脚手架直接生成完整工程。选择哪种取决于项目规模与使用场景。
安装前准备：Node.js
脚手架与 npm 方式都依赖 Node.js 环境。到官网 nodejs.org 下载 LTS 版本并安装，然后在终端验证：
node -v // 输出类似 v20.11.0
npm -v // 输出类似 10.2.4
能打印出版本号即说明环境就绪。
方式一：CDN 直接引入（最快体验）
不需要安装任何工具，把 script 标签放入 HTML 即可：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('CDN 引入成功')
return { message }
}
}).mount('#app')
</script>
</body>
</html>
浏览器打开页面显示"CDN 引入成功"。这种方式适合写演示页、小工具或快速验证想法。
方式二：npm 安装（模块化工程）
先初始化项目，再安装 Vue：
npm init -y
npm install vue@3
之后在代码中以模块方式引入：
// main.js
import { createApp, ref } from 'vue'
注意：仅安装 Vue 还无法直接运行 .vue 单文件组件，需要配合 Vite 等构建工具，因此正式项目通常直接使用方式三。
方式三：官方脚手架 create-vue（推荐）
一条命令创建带 Vite、路由、状态管理等完整配置的项目：
npm create vue@latest
按提示输入项目名，并选择是否启用 TypeScript、Vue Router、Pinia、ESLint 等特性（新手可全部回车使用默认值）。接着执行：
cd vue3-demo
npm install
npm run dev
终端出现 Local: http://localhost:5173/ 后，用浏览器访问即可看到欢迎页，说明安装成功。
选择建议
| 场景 | 推荐方式 |
|---|---|
| 快速演示 / 写示例 | CDN |
| 已有构建工具的工程 | npm |
| 新开正式项目 | create-vue |
小结
体验用 CDN、工程用脚手架。多数读者直接执行 npm create vue@latest 创建项目即可，下一节介绍创建项目的详细过程。