47 lines
1.7 KiB
Markdown
47 lines
1.7 KiB
Markdown
# Nuxt FSD 架构技能
|
||
|
||
`Nuxt` `Feature-Sliced Design` `架构` `AI技能` `前端`
|
||
|
||
# nuxt-fsd
|
||
|
||
一个用于在 [Nuxt 4+](https://nuxt.com/) 项目中应用 [Feature-Sliced Design](https://feature-sliced.design/)（FSD）架构的 Agent 技能。
|
||
|
||
## 安装
|
||
|
||
```bash
|
||
npx skills add adamkasper/nuxt-fsd-skills
|
||
```
|
||
|
||
或使用直接 URL：
|
||
|
||
```bash
|
||
npx skills add https://github.com/adamkasper/nuxt-fsd-skills
|
||
```
|
||
|
||
## 功能介绍
|
||
|
||
该技能教导 AI 编程 Agent 如何使用 Feature-Sliced Design 方法论来组织 Nuxt 4+ 项目结构，涵盖以下内容：
|
||
|
||
- **核心原则**：FSD 专属于 `src/` 目录，而 Nuxt 的 `app/` 目录作为运行时外壳来消费 FSD 内容
|
||
- **层级结构**：`pages → widgets → features → entities → shared`（均位于 `src/` 下）
|
||
- **轻量页面模式**：`app/pages/` 仅包含路由外壳，将实际逻辑委托给 `src/pages/` 中的 FSD 页面切片
|
||
- **导入规则**：使用 `~~/src/` 前缀，通过 `index.ts` 强制执行公共 API，严格遵循单向向下导入
|
||
- **页面优先工作流**：从 `src/pages/` 开始，仅在复用需求明确时（3次以上使用）才进行提取
|
||
- **Widget 与 Feature 的选择**：耦合的逻辑+UI（widget）vs 独立逻辑（feature）
|
||
- **TypeScript 配置**：在 Nuxt 生成的 tsconfig 中包含 `src/` 目录
|
||
- **迁移指南**：在现有 Nuxt 项目中引入 FSD 架构
|
||
|
||
## 触发时机
|
||
|
||
当 Agent 遇到以下情况时，该技能将自动激活：
|
||
|
||
- Nuxt 项目中的架构决策
|
||
- 关于新代码应放置位置的问题
|
||
- 创建新的 pages、features、entities 或 widgets
|
||
- 提及 FSD、feature-sliced、layers 或 slices
|
||
- 跨模块导入决策
|
||
- 代码提取与重构
|
||
|
||
## 许可证
|
||
|
||
MIT |