Skip to content
On this page

开发规范

本文汇总 README 中的推荐做法与禁止事项,以及日常开发常用命令。写业务代码前扫一眼,能避免大部分架构踩坑。

推荐 vs 禁止

✅ 推荐❌ 禁止
模板中使用 <GrowButton>Grow* 契约组件直接 import { ElButton } from 'element-plus'
通过 projectSetting.componentLibrary 切换 UI 库在业务模块内安装或切换驱动
业务模块 peer 依赖 @grow-admin-rock/components业务模块直接依赖三方 UI 库
特殊场景使用 ComponentDriverProvider绕过桥接层直接使用三方组件
useMessage() / useNotice() / useDialog() 统一调用直接 import { ElMessage } 等三方 API
通过 library.ts 声明模块路由与能力在宿主里 deep import 业务内部实现
动态路由:config.ts.vue 分离Mock 文件里 import 页面组件
通过 IoC 获取 routerRouteTable布局/工具里随意混用全局单例

更细的说明见:


常用命令

与根目录 package.json / README 一致:

命令说明
pnpm install安装依赖(自动 postinstallpnpm stub
pnpm serve启动 sample 示例应用(默认 http://localhost:3000
pnpm build生产构建(scripts/build.ts --all
pnpm stub预构建 @grow-admin-config/vite 配置包
pnpm cleanTurbo clean + 删除根 node_modules
pnpm dev交互式选择 workspace 包并行 dev
pnpm turbo:buildTurbo 并行构建所有包
pnpm turbo:devTurbo 并行启动各包 dev
pnpm turbo:previewTurbo 并行预览构建产物

仅操作 sample:

bash
pnpm --filter grow-admin-sample dev
pnpm --filter grow-admin-sample build
pnpm --filter grow-admin-sample preview

业务模块依赖声明

业务包 package.json 示例(与 README 一致):

json
{
  "peerDependencies": {
    "vue": "~3.3.4",
    "@grow-admin-rock/components": "workspace:*"
  },
  "devDependencies": {
    "@grow-admin-rock/components": "workspace:*"
  }
}

业务模块不需要自行安装组件驱动,由宿主 installComponentDriver 完成。


宿主装配顺序(要点)

sample/src/plugin/initIoc.ts 中:

  1. installComponentDriver(定 UI 库、绑定 Message 等)
  2. .use() 各 Library(请求、状态、路由、业务模块…)
  3. 最后 componentsLib(注册 Grow 组件,依赖驱动字典)
  4. appContext.load() 后挂载 router

顺序错误会导致 Grow 组件找不到驱动映射。完整列表见 IOC 模块化


84 个共有契约组件

三个驱动包已对齐全部 84 个三库共有 Grow* 组件。切换 projectSetting.componentLibrary(并同步 vite preset)即可换 UI 库,页面里的 Grow 组件写法不用改

不纳入契约层的能力

以下属于参考项目或业务自行封装,不要放进 rock-components 契约层

组件说明
GrowIconify基于 Iconify 的图标(若项目已全局注册,仍建议业务侧按需封装)
GrowTable基于 vxe-table 的表格
GrowCubeTable基于 @antv/s2 的多维表格
GrowLocalePicker自定义语言切换器(请用 LoginLanguageSwitch / SwitchLanguage

若业务需要类似能力,在 DesignCornerstone 业务模块中实现。


相关包速查

包名职责
@grow-admin-rock/componentsRockComponent 枚举、Grow* 契约组件、ComponentMap
@grow-admin-rock/layouts布局壳:SettingDrawerSettingThemeSwitchLanguage
@grow-admin-rock/localeuseI18nuseLocale、语言包与持久化
@grow-admin-rock/stateuseAppConfiguseThemeuseAuthStore(含 backMenuList
@grow-admin-rock/middleware-router路由表 IoC、RouteTableRouteOperator
@grow-admin-rock/styles全局 CSS 变量、UnoCSS 入口、主题过渡
@grow-admin-rock/constantsAPP_THEME_COLOR_LIST 等设计常量
@grow-admin-rock/component-driver抽象驱动、ComponentDriverProvider、Builder
@grow-admin-rock/component-driver-element-plusElement Plus 映射(84 个)
@grow-admin-rock/component-driver-naiveNaive UI 映射(84 个)
@grow-admin-rock/component-driver-antdvAnt Design Vue 映射(84 个)

更完整的 Rock 包列表见 DesignRock 核心层