词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Codex JHipster Vue 前端分层｜拆开页面和共享组件及数据访问

English

Codex 安装步骤

  1. 打开 GitHub 固定提交的 `.agents/skills/jhipster-vue-standards/SKILL.md`，核对内容与使用条件。
  2. 在自己的项目中创建 `.agents/skills/jhipster-vue-standards/`，把核对后的文件保存为 `.agents/skills/jhipster-vue-standards/SKILL.md`。
  3. 在该项目根目录启动 Codex，输入 `$jhipster-vue-standards` 并选择同名技能。

中文摘要

按项目约定区分 Vue Views、Themes 和 Core。页面组装界面，共享组件负责外观，集中接口层负责数据访问。

SKILL.md 中文导读

可复现示例

为下面的虚构商品卡片页面分配逻辑。
{"page":"ItemGrid.vue","card":"BaseItemCard","request":"listItems","pageLoading":true}

工作步骤

  1. 找到页面层和已有主题组件。
  2. 把请求交给 Core 接口服务，并由视图展示状态。
  3. 核对 DTO、中央错误处理和现有测试。

验收方法

让 `ItemGrid.vue` 在 Views 组装页面，`BaseItemCard` 放 Themes，`listItems` 放 Core 接口服务。页面保留加载反馈。

GitHub 原文 · 更新日期

适用环境

用 Codex 打开采用 JHipster 的 Vue 3 项目，准备叶页面、共享组件与由后端约定确定的数据类型。

常见问题

可以从页面直接调用数据请求吗？

该项目把调用集中在 Core 接口层，页面消费其结果并负责内容组合。

相关指南