# frame_front

**Repository Path**: therefore-and/frame_front

## Basic Information

- **Project Name**: frame_front
- **Description**: 前端vite+vue项目搭建
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-07-12
- **Last Updated**: 2026-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# Frame Front - 企业级后台管理前端

## 项目简介

Frame Front 是一个基于 Vue 3 + TypeScript + Element Plus 的企业级后台管理系统前端，配合 Frame Parent 后端使用，提供完整的权限管理、用户管理等功能。

## 技术栈

| 技术 | 版本 | 说明 |
|-----|------|------|
| Vue | 3.5.x | 渐进式 JavaScript 框架 |
| TypeScript | 5.8.x | JavaScript 超集 |
| Vite | 6.x | 下一代前端构建工具 |
| Element Plus | 2.10.x | Vue 3 组件库 |
| Pinia | 3.x | Vue 状态管理 |
| Vue Router | 4.x | Vue 路由管理 |
| Axios | 1.x | HTTP 请求库 |
| VueUse | 13.x | Vue 组合式 API 工具集 |
| Sass | 1.x | CSS 预处理器 |

## 项目结构

```
frame_front/
├── public/                    # 静态资源
├── src/
│   ├── api/                   # API 接口
│   │   ├── config/            # 请求配置
│   │   ├── helper/            # 请求辅助
│   │   ├── interface/         # 接口类型定义
│   │   └── modules/           # 接口模块
│   ├── assets/                # 静态资源
│   │   ├── icons/             # SVG 图标
│   │   ├── images/            # 图片
│   │   └── styles/            # 全局样式
│   ├── components/            # 公共组件
│   │   ├── ProTable/          # 高级表格
│   │   ├── SearchForm/        # 搜索表单
│   │   ├── Upload/            # 上传组件
│   │   └── ...
│   ├── config/                # 全局配置
│   ├── enums/                 # 枚举定义
│   ├── hooks/                 # 组合式函数
│   ├── layouts/               # 布局组件
│   ├── plugins/               # 插件配置
│   ├── routers/               # 路由配置
│   ├── stores/                # 状态管理
│   ├── typings/               # 类型定义
│   ├── utils/                 # 工具函数
│   ├── views/                 # 页面视图
│   ├── App.vue                # 根组件
│   └── main.ts                # 入口文件
├── .env                       # 环境变量
├── .env.development           # 开发环境变量
├── .env.production            # 生产环境变量
├── index.html                 # HTML 模板
├── package.json               # 项目配置
├── tsconfig.json              # TypeScript 配置
└── vite.config.ts             # Vite 配置
```

## 快速开始

### 环境要求

- Node.js 18+
- pnpm 8+（推荐）

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

### 类型检查

```bash
pnpm type-check
```

### 代码检查与格式化

```bash
# ESLint 检查并修复
pnpm lint

# Prettier 格式化
pnpm format
```

## 图标使用

```vue
<!-- 本地 SVG 图标（assets/icons/ 目录） -->
<SvgIcon name="xiaoshu" />

<!-- 阿里图标库 -->
<i class="iconfont icon-aliwenhao" style="font-size: 24px;"></i>

<!-- Element Plus 图标 -->
<el-icon :size="24">
  <House />
</el-icon>
```

## 路径别名

| 别名 | 路径 |
|-----|------|
| `@` | src |
| `@api` | src/api |
| `@components` | src/components |
| `@utils` | src/utils |
| `@stores` | src/stores |
| `@hooks` | src/hooks |
| `@views` | src/views |

## 环境变量

```bash
# .env.development
VITE_API_URL=http://localhost:1205    # 后端接口地址
VITE_APP_TITLE=Frame Admin            # 应用标题
```

## 推荐 IDE 配置

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- 禁用 Vetur 插件（如已安装）

## 开源协议

Apache License 2.0

## 联系方式

- 作者：周文锋
- 邮箱：1405377877@qq.com
- Gitee：https://gitee.com/therefore-and/