SuperAPI AI 工具集

vue-fsd

前端与建站

查看项目

更新于 10-16 06:13

技能介绍

用途:面向 Vue 3 应用的 Feature-Sliced Design(FSD)架构技能,帮助构建和维护大规模前端代码库,明确业务边界与分层结构。

主要能力:按 FSD 分层(app → pages → widgets → features → entities → shared)组织项目;划分实体(名词、数据)与功能(动词、动作);为每个 slice 提供 index.ts 公共 API;定义并约束导入规则与层依赖;组织共享层(UI 套件、工具、API 客户端、配置);指导页面与 widgets 组合;支持从现有项目迁移到 FSD;配合 TypeScript、Composition API、Pinia、Vue Router。

使用方式:技能内按主题提供参考文档(如 layers.md、entities-features.md、shared.md、pages-widgets.md、public-api.md、vue-integration.md、migration.md),根据上下文加载。实施时输出目录结构、index.ts 公共导出、示例 slice 实现、导入规则说明及架构决策理由。触发场景包括:新建大型 Vue 3 项目、将存量项目重构为 FSD、定义业务域边界、设置导入规则与层依赖、创建可复用实体/功能/widgets、组织共享工具与 UI 组件、支持多团队按归属扩展前端。

限制与约束:必须遵循严格层序,禁止从更高层导入,禁止同层横向导入,禁止循环依赖,禁止混合实体与功能职责,禁止跳过公共 API 直接导入。官方资料提示,并非所有项目都适用 FSD,中小型项目不宜过度设计。具体命令、安装方式及版本要求暂未提供。