当前位置：首页 > news >正文

Vue 开发环境搭建全指南：从工具准备到项目启动

news 2025/10/15 8:43:18

前言：环境搭建是 "万里长征第一步"

很多前端新手卡在学习 Vue 的第一关 —— 环境搭建。明明跟着教程敲命令，却总会遇到 "node 不是内部命令"、"依赖安装失败"、"编辑器报错" 等问题。

其实，开发环境搭建的核心是 "工具链协同"：Node.js 提供运行环境，包管理器处理依赖，编辑器提升开发效率，脚手架 / 构建工具简化项目创建。本文从 "基础工具→编辑器配置→Vue CLI→Vite" 一步步拆解，搭配直观的 SVG 图示，让你一次搞定 Vue 开发环境，避免踩坑。

一、基础工具准备：搭建底层运行环境

1. Node.js：Vue 运行的 "发动机"

Vue 的脚手架（Vue CLI）和构建工具（Vite）都依赖 Node.js 环境，必须先安装 Node.js。

安装步骤：
1. 访问 Node.js 官网，推荐下载 LTS 版本（长期支持版，如 v20.x），稳定性更好。
2. 安装时勾选 "Add to PATH"（自动配置环境变量，关键！），其他默认下一步。
3. 验证：打开终端（CMD/PowerShell/ 终端），输入以下命令，输出版本号即成功：
  bash
```
node -v  # 如 v20.10.0
npm -v   # npm 是 Node 自带的包管理器，如 10.2.3
```
为什么选 LTS 版本？避免新版本的兼容性问题，多数企业生产环境也用 LTS 版。

2. Node 版本管理：用 nvm 解决 "版本混乱"

如果同时开发多个项目，可能需要不同 Node 版本（比如老项目依赖 Node 14，新项目用 Node 20），这时需要 nvm（Node Version Manager） 管理版本。

安装 nvm：
- Windows：下载 nvm-windows（选 nvm-setup.exe）。
- Mac/Linux：终端执行 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash。
- 地址无法访问时使用备用地址：https://nvm.uihtm.com/doc/download-nvm.html

常用命令：

nvm list available  # 查看可安装的 Node 版本
nvm install 20.10.0 # 安装指定版本
nvm use 20.10.0     # 切换到指定版本
nvm list            # 查看已安装版本（带 * 的是当前使用版本）

3. 包管理器：npm、yarn、pnpm 怎么选？

包管理器用于下载 / 管理依赖（比如 Vue 核心库、插件），Node 自带 npm，但还有更优选择。

工具	优势	安装命令	常用命令（以安装 Vue 为例）
npm	内置无需额外安装，生态最广	Node 自带	`npm install vue`（安装）、`npm run dev`（运行）
yarn	速度比 npm 快，缓存机制更优	`npm install -g yarn`	`yarn add vue`、`yarn dev`
pnpm	速度最快，磁盘空间占用最少（共享依赖）	`npm install -g pnpm`	`pnpm add vue`、`pnpm dev`

推荐优先级：pnpm > yarn > npm（新项目优先用 pnpm，老项目跟随原有工具）。

二、编辑器配置：VS Code + 插件打造高效开发环境

推荐用 VS Code（免费、轻量、插件丰富），以下是必装配置：

1. 核心插件

插件名	作用	备注
Volar	Vue 3 官方推荐插件，提供语法高亮、智能提示	替代旧版的 Vetur（Vue 3 优先用 Volar）
ESLint	代码检查工具，规范语法避免错误	需配合配置文件使用
Prettier	代码格式化工具，统一代码风格	可与 ESLint 配合自动修复格式
Vue 3 Snippets	提供 Vue 3 代码片段（如 `vbase` 生成组件模板）	快速生成常用代码结构

安装方法：打开 VS Code → 左侧扩展面板 → 搜索插件名 → 点击 "安装"。

2. 代码格式化配置（关键！）

没有格式化配置，团队开发会出现代码风格混乱（比如缩进用空格还是 Tab）。推荐配置：

在项目根目录创建 .prettierrc（Prettier 配置）：

{"semi": true,       // 语句结尾加分号"singleQuote": true, // 使用单引号"tabWidth": 2,       // 缩进 2 个空格"trailingComma": "es5" // 对象最后一个属性后加逗号
}

VS Code 自动格式化设置：
- 打开设置（Ctrl+,）→ 搜索 "Format On Save" → 勾选（保存时自动格式化）。
- 搜索 "Default Formatter" → 选择 "Prettier"。

三、Vue CLI：成熟稳定的脚手架工具

Vue CLI 是 Vue 官方早期推出的脚手架，基于 Webpack，适合需要稳定配置的项目。

1. 安装 Vue CLI

# 全局安装（仅需一次）
npm install -g @vue/cli
# 验证安装
vue --version  # 输出 @vue/cli 5.x.x 即成功

2. 创建 Vue 项目

# 创建项目（my-vue-cli-project 是项目名）
vue create my-vue-cli-project

关键配置项选择（按上下键移动，空格选中，回车确认）：

Preset：选 "Manually select features"（手动选择特性）。
Features：必选 Babel（语法转换，兼容旧浏览器）、Vue Router（路由）、Vuex（状态管理，Vue 3 可选 Pinia）、Linter / Formatter（代码检查）。
Vue 版本：选 "3.x"（新项目优先 Vue 3）。
ESLint 配置：选 "ESLint + Prettier"（配合前面的格式化工具）。
何时检查：选 "Lint on save"（保存时检查）。
配置文件位置：选 "In dedicated config files"（单独的配置文件，清晰）。

等待依赖安装完成，进入项目并启动：

cd my-vue-cli-project
npm run serve  # 启动开发服务器，默认地址 http://localhost:8080/

3. 项目结构解析

my-vue-cli-project/
├─ public/          # 静态资源（不会被 Webpack 处理）
├─ src/
│  ├─ assets/       # 资源文件（图片、CSS 等，会被 Webpack 处理）
│  ├─ components/   # 自定义组件
│  ├─ router/       # 路由配置（Vue Router）
│  ├─ store/        # 状态管理（Vuex/Pinia）
│  ├─ views/        # 页面级组件（与路由对应）
│  ├─ App.vue       # 根组件
│  └─ main.js       # 入口文件
├─ .eslintrc.js     # ESLint 配置
├─ .prettierrc      # Prettier 配置
└─ vue.config.js    # Vue CLI 配置（可自定义端口、代理等）

核心配置文件：vue.config.js 可修改 Webpack 配置，比如改端口：

module.exports = {devServer: {port: 8081 // 启动端口改为 8081}
}

四、Vite：新一代构建工具（官方推荐）

Vite 是 Vue 作者尤雨溪开发的构建工具，比 Vue CLI 快 10-100 倍，新项目优先用 Vite。

1. Vite 为什么这么快？

开发时不用打包：传统 Webpack 会先打包所有文件再启动，Vite 直接用浏览器原生的 ES 模块（ESM）加载文件，启动秒开。
热更新高效：只更新修改的模块，不刷新整个页面。

2. 用 Vite 创建 Vue 项目

# 创建项目（my-vite-project 是项目名）
npm create vite@latest my-vite-project -- --template vue

--template vue：指定 Vue 模板（默认是 vanilla 原生 JS）。
如需 TypeScript，用 --template vue-ts。

进入项目并启动：

cd my-vite-project
npm install  # 安装依赖
npm run dev  # 启动开发服务器，默认地址 http://127.0.0.1:5173/

3. Vite 项目结构与配置

my-vite-project/
├─ public/          # 静态资源
├─ src/             # 源代码（同 Vue CLI）
├─ .eslintrc.cjs    # ESLint 配置
├─ index.html       # 入口 HTML（Vite 以 HTML 为入口，而非 JS）
└─ vite.config.js   # Vite 配置文件

修改 Vite 配置（如端口、代理）：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],server: {port: 3000, // 端口改为 3000proxy: {'/api': { target: 'http://localhost:8080' } // 接口代理}}
})

五、Vue CLI 与 Vite 怎么选？

场景	推荐工具	理由
新项目开发	Vite	启动快、热更新快，开发体验更好
维护老项目（Vue 2）	Vue CLI	老项目可能依赖 Webpack 特定配置
需要复杂的 Webpack 配置	Vue CLI	Vite 基于 Rollup，Webpack 插件不兼容
追求极致开发效率	Vite	大型项目优势更明显