ApiHug Vue 框架

适用场景

当你的 UI 模块基于 Vue，并且你希望把页面结构、路由元数据、服务层与 ApiHug 生成结果组织成一套稳定工作流时，请阅读这一页。

操作步骤

1. 先把 UI 模块拆成“可复用部分”和“应用入口部分”。 常见拆分方式是：
   • 共享包：util、hook、组件包装层
   • 应用入口：src
2. 在 src 下按职责组织目录：
   • assets 存放样式与静态资源
   • components 存放复用组件
   • pages 存放页面
   • router 负责生成与组装路由
   • service 存放接口模型与服务层
   • stores、types、utils 负责运行时支撑
3. 让页面文件提供路由元数据，再交给工具链生成路由，而不是手工维护第二套路由树。 推荐流程是：
   • 页面文件声明路由元数据
   • 工具链生成路由记录
   • 同一份元数据继续驱动菜单和 i18n key
4. 让 Vue 侧结构与 应用配置 以及 工具链 保持一致。

你应该得到什么

在一个健康的 Vue + ApiHug UI 项目里：

• 页面目录决定主要路由结构
• 路由元数据可以复用于菜单和 i18n
• 服务层与生成模型保持同源
• 前端不会再和后端契约逐步漂移

结果

你会得到一套更容易生成、更容易维护、也更不容易和后端接口脱节的 Vue 应用结构。