# 管理平台之Vite+Ts框架

**Repository Path**: trident-framework/trident-mgr-vite-ts

## Basic Information

- **Project Name**: 管理平台之Vite+Ts框架
- **Description**: 管理平台之Vite+Ts框架【Vue3、Vite、Ts、Element-plus、Pinia、Axios、Sass、Svg、Echarts、Moment、Nprogress】
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-23
- **Last Updated**: 2025-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 管理平台之Vite+Ts框架

## 介绍

这是一个基于 Vite 和 TypeScript 的管理平台前端框架，适用于构建现代化的 Web 应用程序。该框架集成了多种常用组件和工具，便于快速开发企业级后台管理系统。

## 软件架构

- **前端框架**: Vue 3 + TypeScript
- **构建工具**: Vite
- **状态管理**: Pinia + pinia-plugin-persistedstate
- **UI 组件**: Element Plus
- **路由**: Vue Router 4
- **HTTP 请求**: Axios
- **样式**: SCSS + Element Plus 默认样式
- **图标**: SVG + @element-plus/icons-vue
- **其他功能**: 
  - 富文本编辑器: @ckeditor/ckeditor5-build-classic
  - 数据可视化: ECharts + ECharts-Liquidfill
  - 状态管理持久化: pinia-plugin-persistedstate
  - 路由守卫: src/permisstion.ts
  - 全局组件: src/components/
  - 自定义指令: src/directive/

## 安装教程

1. 安装 Vite 创建的项目依赖：

```bash
npm install
```

2. 安装项目所需插件：

```bash
npm i @ckeditor/ckeditor5-build-classic
npm i @ckeditor/ckeditor5-vue
npm i @element-plus/icons-vue
npm i @types/node
npm i axios -S
npm i echarts
npm i echarts-liquidfill
npm i element-plus --save
npm i lodash
npm i moment
npm i nprogress
npm i pinia
npm i pinia-plugin-persistedstate
npm i sass
npm i vite-plugin-svg-icons -D
npm i fast-glob -D
npm i vue-router@4
```

## 使用说明

1. **启动开发服务器**：

```bash
npm run dev
```

2. **构建生产环境包**：

```bash
npm run build
```

3. **运行测试**：

```bash
npm run test
```

4. **代码格式化**：

```bash
npm run format
```

5. **代码规范检查**：

```bash
npm run lint
```

## 目录结构说明

- `src/main.ts`: 项目入口文件
- `src/App.vue`: 根组件
- `src/layout/`: 布局组件，包含顶部菜单、侧边栏、标签栏等
- `src/views/`: 页面视图组件
- `src/components/`: 全局组件
- `src/store/`: Pinia 状态管理模块
- `src/router/`: Vue Router 路由配置
- `src/apis/`: 接口请求模块
- `src/types/`: TypeScript 类型定义
- `src/utils/`: 工具类函数（如本地存储、HTTP 请求封装等）
- `src/assets/`: 静态资源文件（如图片、图标等）
- `src/styles/`: 样式文件（SCSS 变量、全局样式等）

## 参与贡献

1. Fork 本仓库
2. 创建 `Feat_xxx` 分支
3. 提交代码
4. 创建 Pull Request

## 特技

- 使用 `Readme_XXX.md` 支持多语言文档，例如：
  - `Readme_en.md`
  - `Readme_zh.md`
- Gitee 官方博客: [blog.gitee.com](https://blog.gitee.com)
- 探索 Gitee 上的优秀开源项目: [https://gitee.com/explore](https://gitee.com/explore)
- Gitee 最有价值开源项目（GVP）: [https://gitee.com/gvp](https://gitee.com/gvp)
- Gitee 使用手册: [https://gitee.com/help](https://gitee.com/help)
- Gitee 封面人物展示计划: [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

## 许可证

本项目遵循 MIT 许可证。请查看项目仓库中的 LICENSE 文件以获取详细信息。