零基础快速搭建 Vue 3 开发环境（附官方推荐方法）

本文基于 Vue 官方文档，带你快速搭建 Vue 3 开发环境，适配 Windows / macOS / Linux，使用 Vite 构建工具，帮助你顺利开启 Vue 项目开发之旅。

🧱 一、前置环境准备

✅ Node.js 安装

Vue 项目依赖 Node.js 环境。推荐使用 Node.js 官方 LTS 版本。

官网地址：nodejs.org/
安装完成后验证：

node -v
npm -v

推荐版本：

Node.js ≥ 18.x
npm ≥ 8.x

💡 Mac 用户建议使用 nvm 管理 Node 版本：

perl 复制代码

brew install nvm
nvm install 18
nvm use 18

🚀 二、使用官方推荐方式创建 Vue 项目

Vue 团队推荐使用 create-vue 搭配 Vite 创建新项目。

1️⃣ 初始化项目

kotlin 复制代码

npm init vue@latest

执行后将引导你进行以下选项配置：

项目名称（如：my-vue-app）
是否使用 TypeScript
是否启用 Vue Router / Pinia
是否添加 ESLint、Prettier 等工具

建议新手选择 Router + Pinia，其余默认。

2️⃣ 安装依赖

bash 复制代码

cd my-vue-app
npm install

3️⃣ 启动开发服务器

arduino 复制代码

npm run dev

启动成功后输出类似：

arduino 复制代码

  ➜  Local: http://localhost:5173/

浏览器打开地址即可看到 Vue 欢迎页面。

📁 三、项目结构说明

默认模板项目结构如下：

arduino 复制代码

my-vue-app/
├─ public/                // 静态资源
├─ src/                   // 主代码目录
│  ├─ components/         // Vue 组件
│  ├─ App.vue             // 根组件
│  └─ main.js             // 入口文件
├─ index.html             // 模板文件
├─ package.json           // 项目依赖
└─ vite.config.js         // 构建配置

🧩 四、常见问题汇总

❗1. 安装慢 / 卡住

原因：默认使用国外 npm 源

解决方法：

arduino 复制代码

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

也可考虑使用 pnpm 或 yarn。

❗2. 报错 "Cannot find module 'vite'"

原因：依赖未安装或安装失败

解决方法：

复制代码

npm install

❗3. 启动失败，端口被占用

解决方法：

ini 复制代码

npm run dev -- --port=3000

📚 五、下一步学习建议

安装完成只是开始，推荐按以下路径系统学习 Vue 3：

阶段	内容
初级	模板语法、响应式、组件
中级	Vue Router 路由、Pinia 状态管理
高级	Composition API、异步组件、Vite 插件系统

Vue 官方教程：cn.vuejs.org/guide/intro... [来源]

✅ 六、总结

本文手把手带你完成了 Vue 3 开发环境的搭建，使用了官方推荐的 create-vue 和 Vite 工具链，避免了传统 vue-cli 方案的重量化与兼容性问题。

接下来，你可以尝试：

编写一个简单的 Todo 应用
学习 Vue Router 和组件通信
尝试部署项目到 GitHub Pages 或 Vercel

📎 参考资料

Vue 官方快速上手教程：

cn.vuejs.org/guide/quick... [来源]
Node.js 官方下载地址：

nodejs.org/ [来源]

如果你觉得这篇文章对你有帮助，欢迎点赞 + 收藏 + 关注 🙌

后续我会持续更新 Vue 项目实战与进阶技巧！