SuperAPI AI 工具集

nuxt-components

编程与开发

查看项目

更新于 10-15 23:58

技能介绍

用途:为 Nuxt/Vue 3 项目提供标准化的组件组织与编写约定,帮助在创建组件、理解 script setup 顺序约定、组织组件目录时保持一致性。

主要能力:components.md 说明 script setup 的书写顺序、组件模式与组织方式;design-system-primitives.md 介绍如何构建语义化的布局与排版基础组件(Display、MonoLabel、SectionMarker、PageSection、PageShell),以及用 tailwind-variants 的 tv() 工厂惯用法定义组件变体 API、组合规则和何时新增基础组件。

目录结构约定:components/ 下按用途分为 Common(共享工具,如 Copyable、LoadingLine)、Detail(实体详情视图,如 PostDetail)、Form(可复用表单输入,如 AuthorSelect)、Modals(确认/操作弹窗)、Nav(导航元素)、Slideovers(滑出面板,如 CreatePostSlideover)、TabSections(标签页内容区)、Tables(数据表格,如 PostsTable)。

script setup 顺序约定:依次为 Imports、Props & Emits、Composables、Injections、Refs、Toggles、Reactive props、Computed、Fetch + queries、Builders(action/mutation 工厂)、Watchers、Methods、Real-time listeners、Provides、Lifecycles。

使用方式:按上述顺序编写组件脚本,并按目录分类放置组件;构建基础组件时参考 design-system-primitives 的组合规则与 tv() 变体写法。

适用场景:Nuxt 3 + Vue 3 + TypeScript 项目中的组件开发与设计系统建设。

限制:资料未提供安装命令、依赖版本、收费方式及具体平台支持信息,暂未提供。