GUPO ADMIN

Appearance

介绍 ​

沈孟平
最后更新于 2026-04-23 19:53:53

Tip

本项目的代码主题采用了 我自己的 主题，有兴趣的可以试用一下

简介 ​

@gupo-admin/* 是一个基于 vue3、vite、typescript、naive-ui、unocss 的中后台解决方案。目标是为了简化中后台项目从零到一的搭建流程。其包括了一套二次封装的业务组件、请求方案、权限菜单和按钮、 自定义主题、脚手架工具、utils、hooks等。项目使用目前最新的技术栈，既可以作为项目的启动模板，也可以作为学习示例。让您快速掌握项目工程化、最新最流行的 vue 技术栈、封装组件和打包组件产物等技术。

仓库组成 ​

当前仓库是一个 pnpm workspace monorepo，理解这 5 个子包的职责，基本就能读懂整个项目：

包路径作用你通常会在这里做什么
app/业务模板应用验证真实项目集成效果，查看主题、路由、请求、权限等完整落地方式
components/组件库源码开发和维护 At* 组件、hooks、utils
packages/docs/VitePress 文档站编写组件文档、示例说明、开发指南
packages/playground/组件游乐场调试交互、快速验证复杂场景，不受业务壳干扰
packages/cli/脚手架与发布工具生成模板、发布组件或应用

这些包是怎么协作的 ​

  • components 是能力源头，所有文档和演示最终都指向这里的源码。
  • packages/docs/examples 中的示例直接服务于文档页，适合展示标准用法和 API。
  • packages/playground/src/pages 更适合调试复杂交互，例如联动表单、大数据表格、上传、Monaco 等。
  • app 是最终业务壳，负责验证组件放进真实中后台之后的表现，例如主题切换、全局配置、请求封装、路由菜单和权限协作。
  • packages/cli 则负责把这套方案分发出去，让外部项目可以快速拉起模板或执行发布流程。

推荐理解顺序 ​

如果你是第一次接触这个仓库，推荐按下面顺序阅读：

  1. 先看 组件总览，建立有哪些高阶组件、分别解决什么问题的认知。
  2. 再看 packages/playground 和文档中的 :::demo，理解这些组件在真实页面里的组合方式。
  3. 最后回到 app/src/App.vue 与 app/src/layout，看 AtConfigProvider、主题系统和业务壳如何把这些组件串起来。

开发时该进哪个包 ​

  • 要补充文档、示例、API 说明，进入 packages/docs/。
  • 要改组件行为、类型、样式，进入 components/。
  • 要验证组件在复杂交互下是否正常，优先用 packages/playground/。
  • 要确认在真实业务模板里是否无缝集成，再到 app/ 中联调。

文档 ​

文档采用 vitepress 开发，如果发现文档有误，请通过 codeup 提交 pull request 进行修正。

本地运行项目 ​

本项目为了快捷运行脚本命令，使用了 @antfu/ni 进行开发，请自行全局安装该脚本。

bash
# 拉取代码
git clone https://codeup.aliyun.com/gupo/rd-frontend/dev/dev-business-kits-docs

# 安装依赖
ni

# 运行项目
nr dev

# 运行项目文档
nr dev:docs

先决条件 ​

  1. typescript：不必拘泥于用了 ts 就一定要写类型，但请了解 ts 的基础使用。始终记住它只是为了增强我们开发效率以及增强代码可维护性。
  2. unocss：请记住 1 个 unocss 单位表示 4px，如果你觉得太难换算，请写类似：w-100px 这样的代码。
  3. 解决问题的能力：只有大家多用多做多看文档，遇到问题先主动思考，解决不了再提出疑问，这样才能共同进步，模板也才能越来越完善。

monacoEditor ​

如果要使用 monacoEditor 组件，请确保在 main.ts 中引入 init-monaco.ts 文件。

main.ts
ts
import './init-monaco'

// 需要使用 monaco 编辑器，需要解除注释并引入该文件
initMonaco()

Last updated: