Vue3 项目创建指南

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

↑

# Vue3 项目创建指南

本文将详细介绍如何使用不同的方式创建Vue3项目，包括各种工具和模板的使用方法。

## 使用 create-vue

create-vue 是 Vue 官方的项目脚手架工具，它提供了最新的Vue3项目模板。

### 1. 创建项目

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

执行此命令后，你需要回答一些问题来配置项目：

```bash
✔ Project name: ... my-vue-project
✔ Add TypeScript? ... No / Yes
✔ Add JSX Support? ... No / Yes
✔ Add Vue Router for Single Page Application development? ... No / Yes
✔ Add Pinia for state management? ... No / Yes
✔ Add Vitest for Unit Testing? ... No / Yes
✔ Add an End-to-End Testing Solution? ... No / Yes
✔ Add ESLint for code quality? ... No / Yes
✔ Add Prettier for code formatting? ... No / Yes
```

### 2. 项目初始化

```bash
cd my-vue-project
npm install
npm run dev
```

## 使用 Vite

Vite 是一个现代化的前端构建工具，它提供了极快的开发服务器启动和热更新速度。

### 1. 创建项目

```bash
npm create vite@latest my-vue-app -- --template vue
# 或使用 yarn
yarn create vite my-vue-app --template vue
```

### 2. 项目配置

创建完成后，你需要：

```bash
cd my-vue-app
npm install
npm run dev
```

## 使用 Vue CLI

虽然Vue CLI不是Vue3的默认推荐工具，但它仍然支持创建Vue3项目。

### 1. 安装Vue CLI

```bash
npm install -g @vue/cli
```

### 2. 创建项目

```bash
vue create my-vue-app
```

在创建过程中选择Vue3模板：

```bash
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features
```

## 项目结构说明

### 1. 基础结构

```
my-vue-app/
├── src/
│   ├── assets/        # 静态资源文件
│   ├── components/    # 组件文件夹
│   ├── views/         # 视图组件
│   ├── router/        # 路由配置
│   ├── store/         # 状态管理
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── public/            # 公共资源
├── index.html         # HTML模板
├── package.json       # 项目配置文件
├── vite.config.js     # Vite配置文件
└── README.md         # 项目说明文档
```

### 2. 关键文件说明

#### main.js

```javascript
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')
```

#### App.vue

```vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

## 项目配置最佳实践

### 1. 路径别名配置

在 `vite.config.js` 中配置路径别名：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@assets': path.resolve(__dirname, './src/assets')
    }
  }
})
```

### 2. 环境变量配置

创建不同环境的配置文件：

```bash
.env                # 所有环境
.env.development    # 开发环境
.env.production     # 生产环境
```

示例配置：

```plaintext
# .env
VITE_APP_TITLE=Vue3 Project

# .env.development
VITE_APP_API_BASE_URL=http://dev-api.example.com

# .env.production
VITE_APP_API_BASE_URL=http://api.example.com
```

### 3. TypeScript支持

如果你选择使用TypeScript，需要配置 `tsconfig.json`：

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
```

## 开发工具集成

### 1. ESLint配置

安装必要的依赖：

```bash
npm install -D eslint eslint-plugin-vue @vue/eslint-config-typescript
```

配置 `.eslintrc.js`：

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

### 2. Prettier配置

安装Prettier：

```bash
npm install -D prettier @vue/eslint-config-prettier
```

创建 `.prettierrc`：

```json
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 80
}
```

## 总结

本文详细介绍了创建Vue3项目的多种方式：

1. 使用create-vue（推荐）
2. 使用Vite
3. 使用Vue CLI

同时也介绍了：

- 项目结构的最佳实践
- 基础配置说明
- 开发工具集成
- 环境变量配置
- TypeScript支持

选择合适的项目创建方式和工具配置，可以帮助你更好地开始Vue3项目的开发。建议根据项目需求和团队情况，选择最适合的创建方式和配置选项。

元素码农