mcpField
N
naive-ui

naive-ui

github.com/sepush开发24431 次安装35 周前更新
代码仓库

关于 naive-ui

面向使用 Naive UI 开发 Vue 3 应用的参考技能，包含 33 条分级规则，涵盖组件开发、配置、自定义和故障排查。

主要功能

  1. 01涵盖八类的 33 条规则
  2. 02表单与验证指导
  3. 03大型数据集虚拟滚动
  4. 04主题与暗色模式自定义
  5. 05Nuxt.js、SSR 和 Vite 指导

适用场景

  1. 01在 Vue 3 中创建 Naive UI 组件
  2. 02构建含动态字段的表单
  3. 03展示大型表格或树形数据
  4. 04排查样式或用法问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sepush/naive-ui-skills --skill naive-ui

安装后在 Claude Code 中输入/naive-ui确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

metadata.json
README.md
references/
component-button.md
component-data-display.md
component-datatable.md
component-datepicker.md
component-display.md
component-feedback-alert.md
component-feedback.md
component-form-validation.md
component-form.md
component-input.md
component-layout.md
component-menu.md
component-modal.md
component-navigation-steps.md
component-select.md
component-selection.md
component-tree.md
component-upload.md
component-virtual-list.md
core-controlled-uncontrolled.md
core-customize-theme.md
core-experimental-features.md
core-fonts.md
core-i18n.md
core-import-on-demand.md
core-installation.md
core-jsx.md
core-nuxtjs.md

详细介绍

Naive UI 实践

Naive UI 与 Vue 3 应用的使用指南。包含 8 个类别下的 33 条规则，按影响程度排序，用于指导自动化重构、组件创建和问题排查。

适用场景

在以下情况参考这些指南：

  • 使用 Naive UI 编写新的 Vue 3 组件
  • 实现表单和数据验证
  • 使用虚拟滚动（DataTable、Tree、Select）处理大数据集
  • 自定义应用主题和深色模式
  • 排查 Naive UI 使用问题和样式冲突

按优先级划分的规则类别

优先级类别影响前缀
1核心配置CRITICALcore-
2表单与数据输入CRITICALcomponent-
3复杂数据展示HIGHcomponent-
4反馈与浮层HIGHcomponent-
5布局与导航MEDIUMcomponent-
6基础数据展示MEDIUMcomponent-
7高级自定义LOW-MEDIUMcore-
8生态与问题排查LOWcore-

快速参考

1. 核心配置（CRITICAL）
  • core-setup - 自动导入配置、全局配置、providers
  • core-theme - 主题覆盖、深色模式、CSS 变量、useThemeVars
  • core-import-on-demand - 按需导入与 tree shaking
  • core-nuxtjs - Nuxt.js 集成最佳实践
  • core-ssr - 服务端渲染指南
  • core-style-conflict - 潜在样式冲突解决
2. 表单与数据输入（CRITICAL）
  • component-form-validation - 验证规则、动态表单、数组字段
  • component-form - 布局、验证、动态字段、嵌套表单
  • component-input - 格式化输入、精度、验证触发
  • component-select - 可筛选、多选、标签、异步搜索、自定义渲染
  • component-datepicker - 日期范围、快捷选项、格式化、时区
  • component-upload - 自定义请求、文件处理、拖拽上传
3. 复杂数据展示（HIGH）
  • component-datatable - 虚拟滚动、远程数据、排序、筛选、固定列
  • component-tree - 异步加载、可勾选、受控状态、大数据集处理
  • component-virtual-list - 虚拟滚动模式
4. 反馈与浮层（HIGH）
  • component-modal - 表单弹窗、可拖拽、焦点管理、异步关闭
  • component-feedback - 编程式 API、全局方法（Message、Notification）
  • component-feedback-alert - Alert、Skeleton、Spin、LoadingBar、Popconfirm
5. 布局与导航（MEDIUM）
  • component-layout - Layout、Grid、Flex、Space、Card、Divider
  • component-menu - Menu、Dropdown、Breadcrumb、Tabs
  • component-navigation-steps - Steps、Timeline、Pagination、Anchor、BackTop
6. 基础数据展示（MEDIUM）
  • component-data-display - Image、List、Descriptions、Calendar、Time、Countdown
  • component-display - Badge、Tag、Avatar、Progress、Statistic、Result、Empty
  • component-button - Button 变体、加载、图标
  • component-selection - Radio、Checkbox、Switch、Slider、Rate、ColorPicker
7. 高级自定义（LOW-MEDIUM）
  • core-customize-theme - 深度自定义主题
  • core-fonts - 配置字体
  • core-i18n - 国际化
  • core-controlled-uncontrolled - 受控方式与非受控方式
8. 生态与问题排查（LOW）
  • core-troubleshooting - 常见问题与快速修复
  • core-installation - 安装指南
  • core-jsx - JSX 与 TSX 使用
  • core-umd - 使用 UMD 构建
  • core-usage-sfc - 在 SFC 中使用
  • core-vite-ssge - Vite SSG/SSE 集成
  • core-vitepress - Vitepress 集成
  • core-experimental-features - 实验性功能

使用方法

阅读各条规则文件以获取详细说明和代码示例：

references/core-setup.md
references/component-datatable.md

每个规则文件包含：

  • 具体的实现细节
  • Vue 3 setup script 的代码示例
  • 警告说明与前置条件
  • 相关的 TypeScript 接口

完整编译文档

如需查看包含所有展开规则的完整指南：AGENTS.md

评论

支持 Markdown