Vue 环境配置

本章将介绍如何搭建 Vue.js 开发环境，包括 Node.js 安装、使用 Vite 创建项目等内容。

前置要求

在开始学习 Vue 之前，你需要具备以下基础知识：

HTML：了解 HTML 基础语法和标签
CSS：了解 CSS 选择器和基础样式
JavaScript：了解 JavaScript 基础语法（包括 ES6+）

安装 Node.js

Vue 项目基于 Node.js 环境运行，因此首先需要安装 Node.js。

什么是 Node.js？

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，让 JavaScript 可以脱离浏览器在服务端运行。Vue 的开发服务器和构建工具都基于 Node.js。

安装步骤

Windows 用户：

访问 Node.js 官网：https://nodejs.org/
下载 LTS（长期支持）版本（推荐 20.x 或 18.x）
运行安装程序，按照提示完成安装

macOS 用户：

# 使用 Homebrew 安装
brew install node

# 或下载 .pkg 安装包

Linux 用户：

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 或使用 nvm 管理多版本
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 20

验证安装

安装完成后，在终端输入以下命令验证：

node --version  # 显示 Node.js 版本，如 v20.10.0
npm --version   # 显示 npm 版本，如 10.2.3

提示

npm（Node Package Manager）是 Node.js 的包管理器，用于安装和管理项目依赖。

使用 Vite 创建项目

Vite 是 Vue 官方推荐的新一代构建工具，具有以下特点：

极速开发体验：基于 ES 模块，开发时无需打包
热模块替换（HMR）：修改代码后立即反映在页面上
内置 TypeScript 支持：开箱即用
生产优化：构建时自动优化代码

创建 Vue 项目

# 创建项目（按提示选择）
npm create vue@latest my-vue-app

# 或使用更简洁的命令
npm create vue@latest

创建过程中会提示你选择以下选项：

√ Project name: ... (输入项目名称)
√ Add Vue Router? ... (Yes / No) - 是否添加路由
√ Add Pinia? ... (Yes / No) - 是否添加状态管理
√ Add Vitest? ... (Yes / No) - 是否添加测试
√ Add ESLint? ... (Yes / No) - 是否添加代码检查
√ Add Prettier? ... (Yes / No) - 是否添加代码格式化

启动开发服务器

项目创建完成后，进入项目目录并启动开发服务器：

cd my-vue-app
npm install      # 安装依赖（首次创建后必需）
npm run dev      # 启动开发服务器

启动成功后，会显示类似以下信息：

  VITE v5.0.0  ready in 320 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

在浏览器中打开 http://localhost:5173/ 即可看到 Vue 欢迎页面。

项目结构介绍

my-vue-app/
├── public/              # 静态资源目录
│   └── favicon.ico     # 网站图标
├── src/                # 源代码目录
│   ├── assets/         # 资源文件（图片、样式等）
│   ├── components/     # 组件目录
│   ├── router/         # 路由配置
│   ├── stores/         # Pinia 状态管理
│   ├── views/          # 页面视图
│   ├── App.vue        # 根组件
│   └── main.js        # 应用入口
├── index.html          # HTML 入口文件
├── vite.config.js      # Vite 配置
├── package.json        # 项目依赖配置
└── README.md           # 项目说明

常用命令

命令	说明
`npm run dev`	启动开发服务器
`npm run build`	构建生产版本
`npm run preview`	预览生产版本
`npm run lint`	代码检查

使用 Vue CLI 创建项目（可选）

Vue CLI 是 Vue 官方提供的旧版脚手架工具，虽然现在推荐使用 Vite，但了解 Vue CLI 仍有价值。

# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建项目
vue create my-vue-app

# 启动开发服务器
cd my-vue-app
npm run serve

使用 CDN 引入 Vue

如果只是想快速体验 Vue，可以使用 CDN 方式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue CDN 示例</title>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="reverseMessage">反转文字</button>
    </div>

    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, ref } = Vue;
        
        createApp({
            setup() {
                const message = ref('你好，Vue！');
                
                const reverseMessage = () => {
                    message.value = message.value.split('').reverse().join('');
                };
                
                return { message, reverseMessage };
            }
        }).mount('#app');
    </script>
</body>
</html>

注意

CDN 方式适合学习和简单演示，生产环境建议使用构建工具。

IDE 推荐

Visual Studio Code

VS Code 是开发 Vue 应用的首选编辑器，推荐安装以下插件：

Vue - Official：Vue 语言支持
Volar：Vue 3 语言支持（替代 Vetur）
TypeScript Vue Plugin：TypeScript 支持
ESLint：代码检查
Prettier：代码格式化

WebStorm / IntelliJ IDEA

JetBrains 家的 IDE 对 Vue 也有很好的支持，适合大型项目开发。

安装问题排查

npm 安装失败

如果遇到 npm 安装问题，可以尝试：

# 清除 npm 缓存
npm cache clean --force

# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com

# 或使用 npx 直接运行
npx create-vue@latest

Node 版本问题

建议使用 LTS 版本，如果需要管理多个 Node 版本：

# 使用 nvm（推荐）
nvm install 20
nvm use 20

# 或使用 n
npm install -g n
n 20

小结

本章我们学习了：

Node.js 安装：在本地搭建 Node.js 环境
Vite 项目创建：使用 Vite 创建 Vue 项目
项目结构：了解 Vue 项目的目录结构
常用命令：npm run dev、npm run build 等
IDE 配置：VS Code 和插件推荐

练习

安装 Node.js 并验证版本
使用 Vite 创建一个 Vue 项目
启动开发服务器，访问页面
了解项目目录结构

前置要求​

安装 Node.js​

什么是 Node.js？​

安装步骤​

验证安装​

使用 Vite 创建项目​

创建 Vue 项目​

启动开发服务器​

项目结构介绍​

常用命令​

使用 Vue CLI 创建项目（可选）​

使用 CDN 引入 Vue​

IDE 推荐​

Visual Studio Code​

WebStorm / IntelliJ IDEA​

安装问题排查​

npm 安装失败​

Node 版本问题​

小结​

练习​