Vue3 起步

环境准备

安装 Node.js

Vue 3 项目依赖 Node.js 环境。目前需要 Node.js 20.19 或 22.12 及以上版本（两个大版本中任选一个满足即可），版本过低会导致创建失败或安装报错。

如果还没有安装 Node.js，先参考 Node.js 环境搭建 完成安装。

安装完成后，打开终端（Terminal / CMD / PowerShell），输入以下命令验证是否成功：

node -v   # 输出类似：v20.10.0
npm -v    # 输出类似：10.2.3

如果能正常输出版本号，说明环境准备就绪。

包管理器选择

有了 Node.js 就自动拥有了 npm。但 Vue 生态中还有两个常用的包管理器：

本系列教程统一使用 npm，方便新手直接上手。如果你熟悉 pnpm 或 yarn，可以替换成对应的命令。

创建 Vue 3 项目

执行创建命令

在终端中进入你想要存放项目的文件夹，然后执行以下命令：

npm create vue@latest

这条命令会自动下载并运行 create-vue 脚手架（脚手架就是官方提供的一个”项目生成模板”，帮你把项目骨架、配置一次性搭好，省得自己从头配置）。

接下来会出现一系列交互式提问：

✔ Project name: … my-vue3-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

如果你对“脚手架”或者npm create命令有疑问，可以参考 npm create 命令。

选项说明

新手提示：第一次使用建议全部选 No（或只选 ESLint + Prettier），保持项目最简。后续教程会逐步引入路由、状态管理等特性。

进入项目并安装依赖

创建完成后，按提示进入项目目录并安装依赖：

cd my-vue3-app
npm install

启动开发服务器

执行以下命令启动开发服务器：

npm run dev

终端会显示本地访问地址，默认是 http://localhost:5173。打开浏览器访问，看到 Vue 3 的欢迎页面就说明项目创建成功了。

项目目录结构

创建完成后，项目的目录结构大致如下：

my-vue3-app/
├── node_modules/     # 项目依赖包
├── public/           # 静态资源（不会被 Vite 处理）
├── src/              # 源代码目录
│   ├── assets/       # 资源文件（图片、字体等，会被 Vite 处理）
│   ├── components/   # 可复用组件
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
├── .gitignore        # Git 忽略文件
├── index.html        # 项目入口 HTML
├── package.json      # 项目配置和依赖管理
├── README.md         # 项目说明文档
└── vite.config.js    # Vite 配置文件

关键文件说明

常用命令

在 package.json 的 scripts 中可以看到以下命令配置：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

命令分类

至此，你的 Vue 3 开发环境已经搭建完成，可以开始愉快的编码了！