SuperAPI AI 工具集

nuxt-components

前端与建站

查看项目

更新于 10-16 09:21

技能介绍

nuxt-components 是一个面向 Nuxt 项目的 Vue 组件编写规范技能,核心是使用 Vue 3 Composition API 与 script setup,并统一组件的组织方式与代码顺序。

用途:在创建组件、理解 script setup 书写顺序约定、组织组件目录时使用。该技能给出一套标准化的组件编写惯例,适合希望在中大型 Nuxt 项目中保持组件结构一致的团队。

主要能力:

  1. 组件目录结构约定。按功能类别划分目录:Common 存放共享工具组件(如 Copyable、LoadingLine);Detail 存放实体详情视图(如 PostDetail);Form 存放可复用表单输入(如 AuthorSelect);Modals 存放确认与操作弹窗;Nav 存放导航元素;Slideovers 存放抽屉式面板(如 CreatePostSlideover);TabSections 存放标签页内容区块;Tables 存放数据表格(如 PostsTable)。
  2. script setup 顺序约定。以 15 个步骤规范单文件组件内部的排列顺序:1 导入(Imports);2 Props 与 Emits(defineProps、defineEmits);3 Composables;4 Injections(inject);5 Refs(如 useTemplateRef);6 Toggles(如 isOpen);7 Reactive props(如 formData);8 Computed;9 Fetch 与查询;10 Builders(action/mutation 工厂);11 Watchers;12 Methods;13 实时监听(如 privateChannel(...).on(...));14 Provides(provide);15 Lifecycles(如 onMounted)。
  3. 配套文档。资料列出 components.md,涵盖 script setup 顺序、模式与组织方式。

使用方式:按照上述目录分类放置组件,并按 15 步顺序书写 script setup 内容。资料中的示例展示了从导入 createPostActionFactory、声明 props/emits、使用 useFlash,到 provide(SlideoverKey, { isOpen }) 与 onMounted 的完整排列。

适用场景:Nuxt + Vue 3 项目中创建表单、详情页、弹窗、抽屉、标签区块、数据表格等各类组件,以及需要统一组件代码风格与目录约定的团队协作场景。

限制:资料未提供安装命令、依赖要求、支持的 Nuxt 或 Vue 版本范围、示例运行方式、测试方式、价格与授权信息,均暂未提供。