# ViteEngineer

**Repository Path**: learn_44/vite-engineer

## Basic Information

- **Project Name**: ViteEngineer
- **Description**: 学习vite工程化相关的知识
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-01
- **Last Updated**: 2025-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + TypeScript + Vite + Axios 项目

一个现代化的前端开发脚手架，集成了 Vue3、TypeScript、Vite 和 Axios。

## ✨ 特性

- ⚡️ **Vite** - 极速的开发体验和构建工具
- 🎨 **Vue 3** - 使用 Composition API 和 `<script setup>` 语法
- 📘 **TypeScript** - 提供完整的类型安全保障
- 🌐 **Axios** - 配置好的 HTTP 请求库，包含拦截器
- 🛣️ **Vue Router** - 官方路由管理器
- 🎯 **ESLint** - 代码质量和风格检查

## 📦 技术栈

- **Vue 3.4** - 渐进式 JavaScript 框架
- **TypeScript 5.3** - 类型安全的 JavaScript 超集
- **Vite 5.0** - 下一代前端构建工具
- **Axios 1.6** - 基于 Promise 的 HTTP 客户端
- **Vue Router 4.2** - Vue.js 官方路由管理器

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 开发

```bash
npm run dev
```

项目将在 `http://localhost:3000` 启动

### 构建

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 📁 项目结构

```
.
├── public/              # 静态资源
├── src/
│   ├── assets/         # 资源文件
│   ├── components/     # 组件
│   ├── router/         # 路由配置
│   ├── stores/         # 状态管理（Pinia）
│   ├── utils/          # 工具函数
│   │   ├── api.ts      # Axios 配置和拦截器
│   │   └── request.ts  # 封装的请求方法
│   ├── views/          # 页面组件
│   ├── App.vue         # 根组件
│   ├── main.ts         # 入口文件
│   └── style.css       # 全局样式
├── index.html          # HTML 模板
├── package.json        # 项目配置
├── tsconfig.json       # TypeScript 配置
├── vite.config.ts      # Vite 配置
└── README.md          # 项目说明
```

## 🔧 配置说明

### Axios 配置

Axios 已经配置好了请求和响应拦截器：

- **请求拦截器**：自动添加 Token、日志记录
- **响应拦截器**：统一处理错误、日志记录

使用示例：

```typescript
import api from '@/utils/api'

// 或者使用封装的请求方法
import { get, post } from '@/utils/request'

// GET 请求
const data = await get('/users')

// POST 请求
const result = await post('/users', { name: 'John' })
```

### 环境变量

创建 `.env` 文件配置环境变量：

```env
VITE_API_BASE_URL=http://localhost:8080/api
```

### Vite 代理

在 `vite.config.ts` 中已配置代理，开发环境会自动转发 `/api` 请求：

```typescript
proxy: {
  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
}
```

## 📝 页面说明

- **Home** (`/`) - 项目首页
- **About** (`/about`) - 关于页面
- **API Demo** (`/api-demo`) - API 请求示例

## 🎨 代码规范

项目使用 ESLint 进行代码检查：

```bash
npm run lint
```

## 📄 License

MIT