Skip to content

VUP 是什么

VUP 的核心价值是:让团队用统一方式快速搭应用、可控地使用 AI、并按需扩展能力。

你能得到什么

1)Apps 层(vup add

通过模板快速启动不同类型应用:

  • 前端:Vue、Nuxt、VitePress
  • 后端:Nest
  • 多端:UniApp、Capacitor、Electron
  • 平台/工具:Qiankun、WXT、CLI、MCP、Component、Package

2)AI 治理层(rules + skills)

这里的 AI 不是黑盒,而是可治理的交付系统。

  • .agent/rules/*:团队统一的硬约束(流程、规范、质量基线)
  • .agent/skills/*:按场景加载的能力胶囊(可复用执行路径)

为什么 AI 生成代码更标准:

  • 标准化输入:规则、skills、目录约定明确。
  • 标准化过程:分阶段推进、关键 Gate 确认、决策可留痕。
  • 标准化输出:结构、命名、可评审性保持一致。

传统 AI 生成 vs VUP 治理:

维度通用 AI 生成VUP 治理
输入主要依赖提示词,容易漂移rules + skills + 仓库约定
过程中间步骤不透明Phase/Gate 机制,可审计
输出每次风格波动大结构和规范一致性更高
团队协作难复用、难对齐共享约定,可持续复用

skills 分层组合:

  • Flow:端到端流程
  • Capability:跨栈通用能力(HTTP、鉴权、RBAC 等)
  • Stack:框架/平台实现
  • Pattern:常见业务模式(CRUD、登录页、后台布局)

3)Packages 层(vup use

项目启动后按需“后补能力”,避免一开始过度设计:

  • @vup/ui / @vup/ui-mobile:桌面端/移动端 UI 封装
  • @vup/http:统一请求层与拦截器能力
  • @vup/mock:基于 MSW 的 mock 联调能力
  • @vup/pwa:PWA 预设与运行时辅助能力
  • @vup/iconfont:图标资源整合
  • @vup/richeditor:富文本能力
  • @vup/nest-upload:Nest 上传模块

4)Examples 参考层(examples/

基座仓库还提供“单能力示例工程”:

  • examples/mock
  • examples/pwa
  • examples/qiankun
  • examples/ui

这些示例用于接入参考和能力验证,不作为 vup add 的正式应用模板。 需要时可通过 vup example 添加到当前项目。

为什么这套结构有效

  • 启动更快:先建应用,再逐步增强。
  • AI 更稳:rules 兜底行为,skills 复用成熟路径。
  • 架构更轻:功能按需添加,不提前堆复杂度。
  • 协作更顺:统一约定降低 onboarding 和评审成本。

下一步阅读