Vue3 环境搭建 - 安装与配置

发布时间: 2025-03-22 12:06

↑

# Vue3 环境搭建 - 安装与配置

本文将详细介绍如何搭建Vue3开发环境，包括必要工具的安装和基本配置。

## 前置要求

在开始之前，请确保你的系统已安装以下工具：

1. Node.js (推荐版本 >= 16.0.0)
2. npm (通常随Node.js一起安装) 或 yarn
3. 文本编辑器或IDE (推荐使用Visual Studio Code)

## Node.js安装

1. 访问 [Node.js官网](https://nodejs.org/)
2. 下载并安装LTS(长期支持)版本
3. 安装完成后，打开终端验证安装：

```bash
node --version
npm --version
```

## Vue3安装方式

### 1. 使用CDN

最简单的使用方式是通过CDN直接在HTML中引入Vue3：

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```

### 2. 使用npm

在项目中使用npm安装Vue3：

```bash
npm init vue@latest
```

这个命令会安装并执行 `create-vue`，它是Vue官方的项目脚手架工具。

### 3. 使用Vite

Vite是Vue团队推荐的构建工具，提供更快的开发体验：

```bash
npm create vite@latest my-vue-app -- --template vue
```

## 开发环境配置

### 1. VSCode配置

推荐安装以下VSCode插件：

- Volar - Vue3官方推荐的开发工具
- ESLint - 代码质量检查工具
- Prettier - 代码格式化工具

### 2. 基础配置文件

#### vite.config.js

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})
```

#### .eslintrc.js

```javascript
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}
```

## 项目结构

一个标准的Vue3项目结构如下：

```
my-vue-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── package.json
├── vite.config.js
└── README.md
```

## 环境变量配置

### 1. 创建环境变量文件

```bash
.env                # 所有环境都会加载
.env.development    # 开发环境加载
.env.production     # 生产环境加载
```

环境变量文件示例：

```plaintext
VITE_APP_TITLE=Vue3 App
VITE_APP_API_URL=http://api.example.com
```

### 2. 使用环境变量

```javascript
console.log(import.meta.env.VITE_APP_TITLE)
console.log(import.meta.env.VITE_APP_API_URL)
```

## 常见问题解决

### 1. 端口占用

如果默认端口(3000)被占用，Vite会自动尝试下一个可用端口。你也可以在`vite.config.js`中指定其他端口：

```javascript
export default defineConfig({
  server: {
    port: 8080
  }
})
```

### 2. 代理配置

处理跨域问题，在`vite.config.js`中配置代理：

```javascript
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})
```

## 总结

本文介绍了Vue3开发环境的完整搭建流程：

1. 安装必要的开发工具
2. 选择合适的Vue3安装方式
3. 配置开发环境
4. 了解项目结构
5. 设置环境变量
6. 解决常见问题

通过以上步骤，你已经可以开始Vue3项目的开发了。建议在开始具体项目开发之前，先熟悉一下Vue3的基础概念和组合式API的使用方式。

元素码农