django-vue-admin-skill

一个 Claude Skill：安装后由 Claude 交互式生成一个开箱即用的 Django + Vue 管理后台框架。 本仓库只开源提示词与文档，不含业务代码——使用者用这个 skill 自己生成代码。

English

---

这是什么

building-django-vue-admin 是一个 Claude Code Skill。激活后，Claude 会先和你确认几个配置（项目名、数据库、是否需要 C 端、业务模块），然后分阶段生成一整套前后端代码骨架：

• 后端：Django 5 + django-ninja（REST API）
• 前端：Vue 3 + TypeScript + Vite + Element Plus（管理控制台）

内置能力

能力	说明
🔑 自定义 User 模型	不依赖 Django 默认 User，扩展性强
❄️ Snowflake ID 主键	64 位 BIGINT，全局唯一、时间有序，自实现（线程安全 + 时钟回拨检测）
🔐 JWT 双 Token 认证	Access（120 分钟）+ Refresh（7 天），自动刷新 + 并发队列控制
🛡️ RBAC 权限	用户 / 角色 / 菜单 / 按钮权限，菜单可见性 + 按钮级 v-permission 指令
📚 字典系统	字典类型 + 字典数据，前端 DictSelect / DictTag 组件 + 缓存
📦 统一响应格式	HTTP 恒 200，业务码在 body {code, message, data}
⚠️ 全局异常处理	所有异常统一转换，文案可直接弹窗
🍪 图形验证码	登录校验，一次一删，防重放
🖼️ 文件上传	本地 / 对象存储，魔数校验
🔀 双 NinjaAPI 实例	B 端（JWT+RBAC）与可选 C 端（微信 OAuth）物理隔离

截图 / 演示

使用cluade code + deepseek v4 pro 最终生成的效果如下：

---

安装

方式一：手动 clone（推荐）

git clone https://github.com/AngelLiang/django-vue-admin-skill.git \
  ~/.claude/skills/building-django-vue-admin

clone 时注意：目标目录名需为 building-django-vue-admin（skill 名由目录决定）。

方式二：Plugin 一键安装

/plugin marketplace add AngelLiang/django-vue-admin-skill
/plugin install django-vue-admin

安装后，skill 会根据你的对话内容尝试自动激活。推荐显式调用（更可靠，见下方使用）。

---

使用

1. 在一个空目录里打开 Claude Code（这个目录将作为生成的项目根）。
2. 显式调用 skill（推荐，确保激活）：

   /building-django-vue-admin
   

   也可以通过对话意图触发（例如 "帮我搭一个 django + vue 的管理后台框架"），但意图识别不一定每次都成功，显式调用最可靠。

3. skill 激活后，会先和你确认：
   • 项目名（默认 my-admin）
   • 数据库（开发 SQLite / 生产 MySQL 或 PostgreSQL）
   • 是否需要 C 端小程序接口（默认否）
   • 需要哪些业务模块（默认仅 system 基线）
4. 确认后，Claude 按 后端骨架 → 前端骨架 → 联调初始化 分阶段生成，并在每阶段给出验证步骤。
5. 按提示运行 uv sync / pnpm install，即可启动后台（/api/docs + http://localhost:5173）。

默认超管账号：admin / admin123（⚠️ 生产环境务必修改）。

---

工作原理（Progressive Disclosure）

这个 skill 不是把整份文档塞进上下文，而是采用渐进式披露：

• SKILL.md 是工作流编排器 + 导航目录（~150 行），规定生成的阶段与每阶段读取的参考文档；
• 详细的 8 份主题参考放在 references/，按需加载（未被引用时零 token 成本）；
• 启动时只有 skill 的 description 注入上下文，正文与参考在需要时才读取。

这种结构让大文档也能高效驱动生成，而不挤占上下文。

仓库结构

django-vue-admin-skill/
├── .claude-plugin/plugin.json         # plugin 元数据
├── skills/building-django-vue-admin/
│   ├── SKILL.md                       # 工作流编排 + 导航
│   └── references/                    # 8 份主题参考（按需加载）
│       ├── database.md                #   数据库设计 / Snowflake / 表结构 / 索引
│       ├── backend-arch.md            #   后端架构 / 双实例 / JWT / RBAC / 异常
│       ├── frontend-arch.md           #   前端架构 / 静态路由 / Pinia / v-permission
│       ├── api-spec.md                #   API 清单 / 统一响应 / Swagger 规范
│       ├── conventions.md             #   命名 / 注释 / tags / 菜单预设
│       ├── env-setup.md               #   uv / pnpm / 环境变量 / 部署
│       ├── security.md                #   验证码 / Token / 敏感字段
│       └── business-module-template.md#   业务模块扩展范式
├── docs/                              # 面向人类（同行审核）
│   ├── architecture-overview.md       #   架构总览（5 分钟读懂）
│   └── design-decisions.md            #   11 条关键决策对比 ★
├── examples/                          # 生成代码片段样例（非完整项目）
│   ├── snowflake-id.md
│   ├── rbac-decorator.md
│   └── v-permission-directive.md
└── spec/开发文档.md                   # 原始完整规格（权威参考）

---

同行审核

想评审这个框架的架构与取舍？请读：

1. docs/architecture-overview.md — 5 分钟高层视图（技术栈 / 模块依赖 / 双端架构 / RBAC 端到端流程）。
2. docs/design-decisions.md — 11 条关键决策的备选方案对比与采用理由（django-ninja vs DRF、Snowflake vs UUID、双实例、统一 200、不建权限表、统一用户表、静态路由……）。
3. skills/building-django-vue-admin/SKILL.md — skill 的工作流编排。
4. examples/ — skill 生成的代码长什么样。

扩展业务模块

system 模块（用户/角色/菜单/字典）是通用基线。新增任意业务模块（商品、订单、文章……）按 references/business-module-template.md 的 9 步范式即可。

技术栈

后端	前端
Python 3.11+ / uv	Vue 3.5+ / TypeScript
Django 5.2+	Vite 6
django-ninja 1.6+	Element Plus 2.x
SQLite / MySQL 8.0	Vue Router 4 / Pinia 2
Redis 7 / PyJWT / bcrypt	Axios / Sass

贡献

欢迎 Issue 与 PR。提交信息遵循约定式提交（feat: / fix: / docs: …）。

License

MIT