vue开发环境如何搭建

Vue 开发环境搭建（最新版，新手一步到位）

我给你整理了最简单、最稳定、最新的 Vue 开发环境搭建流程，全程跟着做就能成功，支持 Vue 2 / Vue 3。

一、先安装必备工具：Node.js

Vue 必须依赖 Node.js 环境，它自带包管理工具。

1. 下载安装

官网：https://nodejs.org/推荐下载 LTS 长期稳定版（左边那个）

安装时一路下一步，不用改任何设置。

2. 验证是否安装成功

打开 CMD / 终端 / PowerShell，输入：

bash

运行

node -v   # 查看Node版本
npm -v    # 查看npm版本

出现版本号就说明成功了。

二、安装 Vue 脚手架（两种任选其一）

方法 1：推荐 → 最新 Vue 官方工具 Vite（超快）

适合 Vue 3，构建速度极快，官方主推。

bash

运行

# 安装vite
npm create vite@latest

然后按提示选择：

1. 项目名称
2. 框架选择：Vue
3. 语言：JavaScript / TypeScript

进入项目：

bash

运行

cd 项目名
npm install
npm run dev

打开浏览器访问 http://localhost:5173 即可看到 Vue 页面。

方法 2：传统脚手架 Vue CLI（兼容 Vue2/Vue3）

bash

运行

# 全局安装vue脚手架
npm install -g @vue/cli

验证安装：

bash

运行

vue --version

创建项目：

bash

运行

vue create 项目名

然后选择：

• Default ([Vue 3] babel, eslint) → Vue3
• Default ([Vue 2] babel, eslint) → Vue2

启动项目：

bash

运行

cd 项目名
npm run serve

访问 http://localhost:8080。

三、安装代码编辑器（必装）

推荐 VS Code：https://code.visualstudio.com/

必装插件

1. Vue Language Features (Volar) → Vue 官方插件
2. Prettier → 代码格式化
3. Auto Close Tag → 自动闭合标签

安装后重启 VS Code 即可。

四、测试环境是否搭建成功

启动项目后出现 Vue 欢迎页面 = 环境搭建完成！

总结

1. 安装 Node.js
2. 用 Vite 或 Vue CLI 创建 Vue 项目
3. 安装 VS Code + Volar 插件
4. npm install → npm run dev 运行项目