Vue3 环境搭建 5 步走（零基础友好）

Vue.js渐进式前端框架，聚焦视图层，以数据驱动、组件化为核心。其响应式数据系统实现数据与视图双向绑定，无需手动操作DOM；组件化设计降低大型项目开发复杂度。框架轻量灵活，可按需集成Vue Router、Pinia/Vuex、Vite等生态工具。Vue 2稳定、生态成熟，Vue3适配TypeScript且性能优化。它学习成本低，中文文档完善，广泛应用于单页应用、后台管理系统、移动端H5、小程序等场景，是企业级前端开发的主流选择。

Vue3 官方推荐使用 Vite 作为构建工具（比传统 Vue CLI 更快、更轻量化），以下是基于 Vite 的 5 步极简搭建流程，兼顾易操作和实用性：

如图：

一、 安装 Node.js（核心依赖）

Vue3 项目依赖 Node.js 环境（提供 npm/yarn 包管理工具），要求 Node.js 版本 ≥ 18.0（推荐 LTS 版本，如 20.x）。

• 下载：访问 Node.js 官网，选择对应系统（Windows/Mac/Linux）的安装包，一键安装（Windows 建议勾选「Add to PATH」）。

• 验证：打开终端/CMD，输入以下命令，能显示版本号即成功：

  node -v   # 如 v20.10.0
  npm -v    # 如 v10.2.3

• 可选优化（加快 npm 下载速度）：配置淘宝镜像源

  npm config set registry https://registry.npmmirror.com

二、安装 Vite 项目创建器（全局）

Vite 是 Vue3 官方推荐的构建工具，先全局安装「Vite 项目脚手架」：

npm install -g create-vite

• 若提示权限不足（Mac/Linux）：加 sudo 前缀

  sudo npm install -g create-vite

• 备选：若习惯 Vue CLI，可安装 npm install -g @vue/cli@latest（Vue CLI 5+ 支持 Vue3）。

三、创建 Vue3 项目

在终端进入你想存放项目的目录（如 cd ~/Desktop），执行以下命令创建项目：

# create-vite 项目名 --template vue（指定 Vue3 模板）
create-vite my-vue3-app --template vue

• my-vue3-app 是自定义项目名（可改，如 vue3-demo）；

• 执行后，终端会提示「进入项目目录 + 安装依赖」，先按提示进入项目：

  cd my-vue3-app  # 进入项目根目录

• 安装项目依赖（核心步骤，缺一不可）：

  npm install

四、启动开发服务器

依赖安装完成后，启动本地开发服务：

npm run dev

• 执行成功后，终端会输出访问地址（如 http://127.0.0.1:5173/）；
• 复制地址到浏览器打开，能看到 Vue3 默认欢迎页面，说明项目启动成功！

五、验证运行 + 基础配置

1. 验证功能

• 浏览器打开 http://127.0.0.1:5173/，能看到 Vue3 标志和「Hello Vue 3 + Vite」文字，即搭建完成；
• 测试热更新：打开项目文件夹，编辑 src/App.vue（如修改 <h1> 里的文字），保存后浏览器会自动刷新，验证热重载功能。

2. 基础配置（可选但实用）

• 打包项目：开发完成后，执行 npm run build，会生成 dist 文件夹（可部署到服务器）；
• 安装调试工具：浏览器安装「Vue Devtools」扩展（Chrome 应用商店），可调试 Vue3 组件、状态；
• 扩展功能：如需用 TypeScript，创建项目时改模板为 --template vue-ts。

六、核心注意事项

1. 若端口被占用（如 5173），Vite 会自动切换端口（如 5174），以终端输出为准；
2. Windows 若终端识别不了 npm，重启终端/电脑（确保 Node.js 已加入环境变量）；
3. 若依赖安装失败，可删除项目下的 node_modules 文件夹，重新执行 npm install。

至此，Vue3 开发环境已完全搭建，可直接在 src 目录下编写组件、开发业务逻辑！