# sherry-platform-vue3

**Repository Path**: RememberHeart/sherry-platform-vue3

## Basic Information

- **Project Name**: sherry-platform-vue3
- **Description**: 基于 Vue3+TS+antdv@3 的中后台管理系统开发模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-10
- **Last Updated**: 2025-08-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, monorepo, 中后台管理系统

## README

## Sherry Platform Vue3

Sherry Platform Vue3 提供了一个基于 `Vue3+TS+Pinia+AntdV@3` 的、开箱即用的中后台管理系统项目模板，该模板里包含了 `platform`, `pro-components`, `hooks`, `utils` 四个包。

### 待完善

- [] `postcss-html` 依赖发布新版本后，完善 _stylelint_ 对 `vue` 文件的样式修复
- [] 优化代码提交时的检测速度
- [] `ProSearch` 组件支持折叠展开

### platform

这个包保存了中后台管理系统项目的业务代码，所有的业务开发都在这里的 src 目录下进行，下文介绍了 src 下的每一个目录及文件的作用。

#### api

- 保存所有与后端相关的接口及类型定义
- `api/types.ts` 保存了与后端接口相关的通用类型定义
- `api/utils.ts` 保存了与 API 相关的工具函数
- `xxx` 目录保存该模块的所有接口
  - `xxx/config.ts` 保存该模块的统一配置
  - `xxx/yyy` 目录保存该模块下的子模块接口
  - `xxx/yyy` 子模块至少包含以下文件：
    - `api.ts` 保存模块下的所有的 API
    - `config.ts` 保存模块下的所有配置信息，如接口路径等
    - `enums.ts` 保存模块下的所有枚举数据，这些枚举数据与后端一一对应
    - `types.ts` 保存模块下的所有类型信息，这些类型信息根据实际情况来撰写
    - `index.ts` 统一导出 `api.ts`, `config.ts`, `enum.ts`, `types.ts` 中的所有内容``

#### assets

- 保存所有的静态资源
- `assets/icons` 目录保存所有的自定义 SVG 图标，各 SVG 图标分类保存
  - `assets/icons/index.ts` 导入所有的自定义 SVG 图标
  - `assets/icons/xxx` 目录保存该类型/模块的图标
- `assets/styles` 目录保存所有的样式文件
  - `assets/styles/theme` 目录保存主题定制的相关文件
  - `assets/styles/common` 目录保存通用的样式
  - `assets/styles/mixins` 目录保存常用的 LESS 函数
- `assets/images` 目录保存全局的图片文件

#### components

- 保存所有的业务组件
- 每个业务组件都用单独的文件夹存放
- 所有的业务组件都在对应文件夹下的 `index.ts` 文件中导出
- 所有的业务组件统一在 `components/index.ts` 文件中导出

#### config

- 保存全局的统一信息，如全局统一的枚举值等

#### core

- 保存项目运行的核心代码
- `core/authorization` 目录下保存了操作权限相关的核心代码
- `core/permission` 目录下保存了路由权限相关的核心代码
- `core/bootstrap.ts` 文件保存了项目启动时的核心代码
- `core/lazy-use.ts` 文件保存了 Vue 插件引入的核心代码

#### hooks

- 保存业务相关的 hooks
- 每个 hook 存放到单独的文件中，最后统一从 `hooks/index.ts` 文件中导出

#### layouts

- 保存布局相关的业务代码
- 目前模板里提供了 `basic-layout` 和 `blank-layout` 两套布局

#### mocks

- 保存 mock 相关的业务代码，代码组织推荐与 `api` 模块保持一致，一一对应

#### router

- 保存路由配置的业务代码
- `router/basic-routes` 目录下保存 `basic-layout` 布局对应的路由
- `router/blank-routes` 目录下保存 `blank-layout` 布局对应的路由

#### stores

- 保存 Pinia Store 相关的业务代码
- `stores/modules` 目录下保存每个 Store，最终在 `stores/index.ts` 文件中导出

#### types

- 保存全局通用的业务类型定义

#### utils

- 保存全局通用的业务工具函数

#### views

- 保存所有的视图文件
- 视图文件建议以模块划分
- 每个模块下的静态资源统一放到该模块的 `assets` 目录下

### pro-components

这个包保存了所有的通用组件，这些组件都是 _业务无关_ 的，每个组件的用法和属性含义都有详细注释。

#### Ellipsis 组件

- 该组件用于提供文本溢出折叠的功能

#### PageWrapper

- 该组件用于简单包裹视图内容

#### ProEmpty

- 该组件用于 Empty 状态展示，在 `ant-design-vue` Empty 组件基础上做了一些扩展

#### ProLayout

- 该组件用于业务系统布局，封装了中后台管理系统中常用的布局

#### ProSearch

- 该组件用于检索表单，可用于 List、Table 等需要提供检索的场景

#### ProSelect

- 该组件用于提供远程查询选择、触底继续加载等额外功能

#### ProTable

- 该组件提供了页面级的 Table 组件封装，包含检索表单、工具栏、Table 内容

#### SvgIcon

- 该组件封装了 SVG 雪碧图的使用，需要与 `svg-sprite-loader` 插件配合

### utils

这个包保存了各类的工具函数和工具对象。

#### axios plus

- 对 Axios 进行了二次封装。
- 封装了 token 刷新 的逻辑
- 提供了 `beforeRequest`, `afterResponse`, `refreshToken`, `onRequestError` 和 `onResponseError` 钩子

#### 其他

- `console.ts` 封装了日志打印的函数
- `patterns.ts` 提供了一些通用的正则表达式
- `utils.ts` 提供了一些其他的工具函数

### hooks

这个包保存了通用的 hooks。

#### use-auto-trig-collapse

- 该 hook 用于监听指定元素 (target) 的 _resize_ 事件和宽度，以设置是否折叠
- 使用该 hook 时，默认监听的元素为 `window`

#### use-controllable-value

- 该 hook 用于将指定属性转为支持非受控的属性
- 常用于将 `prop` 里的属性封装为 `v-model` 属性

#### use-request

- 该 hook 封装了 axios 请求的常用逻辑，如 loading 处理、error 处理等