# erpdemo

**Repository Path**: dongdong-git/erpdemo

## Basic Information

- **Project Name**: erpdemo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 门户网站前端项目

这是一个基于 Vue 3 + Element Plus 的现代化门户网站前端项目。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **Element Plus** - 基于 Vue 3 的组件库
- **Vue Router** - Vue.js 官方路由管理器
- **Pinia** - Vue.js 官方状态管理库
- **Axios** - 基于 Promise 的 HTTP 客户端

## 项目结构

```
src/
├── api/              # API 接口管理
│   └── index.js     # API 接口定义
├── assets/          # 静态资源
├── components/      # 公共组件
│   └── layout/     # 布局组件
│       └── Layout.vue
├── router/          # 路由配置
│   └── index.js
├── store/           # 状态管理
│   ├── index.js    # Pinia 实例
│   └── user.js     # 用户状态模块
├── utils/           # 工具函数
│   ├── index.js    # 通用工具函数
│   └── request.js  # Axios 请求封装
├── views/           # 页面组件
│   ├── Home.vue    # 首页
│   └── About.vue   # 关于页面
├── App.vue          # 根组件
└── main.js          # 入口文件
```

## 核心功能

### 1. 路由管理 (Vue Router)
- 配置了路由懒加载
- 支持路由守卫
- 自动设置页面标题

### 2. 状态管理 (Pinia)
- 用户信息管理
- Token 管理
- 登录/登出功能

### 3. HTTP 请求 (Axios)
- 统一的请求封装
- 请求/响应拦截器
- 自动处理错误信息
- Token 自动携带
- 代理配置支持

### 4. UI 组件 (Element Plus)
- 完整的组件库支持
- 图标库集成
- 响应式布局

## 安装依赖

```bash
npm install
```

## 开发模式

```bash
npm run dev
```

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

## 生产构建

```bash
npm run build
```

## 预览生产构建

```bash
npm run preview
```

## 环境变量

项目支持环境变量配置：

- `.env.development` - 开发环境配置
- `.env.production` - 生产环境配置

### 配置示例

```
VITE_API_BASE_URL=/api
```

## API 使用示例

```javascript
import { getUserList, login } from '@/api'

// 获取用户列表
const fetchUsers = async () => {
  try {
    const res = await getUserList({ page: 1, size: 10 })
    console.log(res.data)
  } catch (error) {
    console.error(error)
  }
}

// 登录
const handleLogin = async () => {
  try {
    const res = await login({ username: 'admin', password: '123456' })
    // 保存 token
    localStorage.setItem('token', res.data.token)
  } catch (error) {
    console.error(error)
  }
}
```

## 状态管理使用示例

```javascript
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

// 设置 token
userStore.setToken('your-token')

// 设置用户信息
userStore.setUserInfo({ name: 'John', email: 'john@example.com' })

// 登出
userStore.logout()
```

## 工具函数使用示例

```javascript
import { formatDate, debounce, throttle } from '@/utils'

// 日期格式化
const formattedDate = formatDate(new Date())

// 防抖
const handleSearch = debounce(() => {
  console.log('搜索...')
}, 500)

// 节流
const handleScroll = throttle(() => {
  console.log('滚动...')
}, 300)
```

## 项目特点

1. ✅ **现代化技术栈** - 采用最新的 Vue 3 Composition API
2. ✅ **完善的类型支持** - 良好的代码结构和注释
3. ✅ **开箱即用** - 集成常用工具和配置
4. ✅ **响应式设计** - 支持多种设备访问
5. ✅ **模块化开发** - 清晰的项目结构,易于维护
6. ✅ **统一的错误处理** - 完善的请求拦截和错误提示

## 开发建议

1. 遵循 Vue 3 Composition API 的最佳实践
2. 组件命名使用 PascalCase
3. 工具函数使用 camelCase
4. 合理使用组件化和模块化
5. 注意性能优化,使用路由懒加载

## License

ISC