# component-management-back-vue3

**Repository Path**: hide-yesterday/component-management-back-vue3

## Basic Information

- **Project Name**: component-management-back-vue3
- **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-04-08
- **Last Updated**: 2025-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Pina, TypeScript, Router

## README

# component-management-back-vue3

## 项目介绍

component-management-back-vue3 是一个基于 Vue 3 + TypeScript + Vite 构建的组件管理后台系统。该系统提供了现代化的组件管理界面，支持组件的展示、搜索、分类和管理等功能。

## 技术栈

- **前端框架**：Vue 3
- **构建工具**：Vite
- **类型系统**：TypeScript
- **状态管理**：Pinia
- **路由管理**：Vue Router 4
- **UI组件库**：Element Plus
- **HTTP客户端**：Axios
- **样式预处理器**：Sass
- **模拟数据**：MockJS
- **图标支持**：SVG Icons + Element Plus Icons

## 功能特性

- ✅ 现代化的UI设计（基于Element Plus）
- ✅ 完善的路由管理（支持权限控制）
- ✅ 组件展示与管理
- ✅ SVG图标支持
- ✅ 分页功能
- ✅ 响应式设计
- ✅ 国际化支持（中文）
- ✅ 模拟数据支持（开发环境）
- ✅ 前端代理配置
- ✅ TypeScript类型支持

## 快速开始

### 环境要求

- Node.js 16+
- npm 8+

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
npm run dev
```

开发服务器默认运行在 http://localhost:3000

### 构建生产版本

```bash
npm run build:prod
```

### 预览生产版本

```bash
npm run preview
```

### 类型检查

```bash
npm run type-check
```

### 代码规范检查

```bash
npm run lint
```

## 项目结构

```
├── src/
│   ├── api/            # API接口定义
│   ├── assets/         # 静态资源
│   │   ├── icons/      # SVG图标
│   │   └── images/     # 图片资源
│   ├── components/     # 全局组件
│   ├── layout/         # 布局组件
│   ├── router/         # 路由配置
│   ├── stores/         # Pinia状态管理
│   ├── styles/         # 全局样式
│   ├── utils/          # 工具函数
│   ├── views/          # 页面视图
│   ├── App.vue         # 根组件
│   ├── main.ts         # 入口文件
│   └── setting.ts      # 项目配置
├── mock/               # Mock数据
├── public/             # 公共资源
├── vite.config.ts      # Vite配置
├── tsconfig.json       # TypeScript配置
└── package.json        # 项目依赖
```

## 配置说明

### 环境变量

项目使用 `.env.development` 和 `.env.production` 管理不同环境的配置。主要环境变量包括：

- `VITE_APP_BASE_API`：API基础路径
- `VITE_NODE_ENV`：环境标识
- `VITE_NODE_APP_TITLE`：应用标题
- `VITE_SERVER_PORT`：服务器端口

### 代理配置

开发环境代理配置在 `vite.config.ts` 中设置，默认代理到 `http://127.0.0.1:8200`。

## 组件说明

### 全局组件

- **SvgIcon**：SVG图标组件
- **Pagination**：分页组件
- **Element Plus Icons**：Element Plus图标库

## 推荐IDE配置

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (禁用Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)

## 许可证

MIT