mcpField
L
layui-vue3

layui-vue3

github.com/partme-ai设计与 UI71685 次安装3 周前更新
代码仓库

关于 layui-vue3

面向 Vue 3 开发者的 Layui Vue 文档技能，提供组件示例、模板和 API 参考，覆盖 TypeScript、主题定制及国际化。

主要功能

  1. 01组件示例与 API 参考
  2. 02Layer 弹层 API 指引
  3. 03TypeScript 示例
  4. 04主题与国际化说明
  5. 05安装和组件使用模板

适用场景

  1. 01在 Vue 3 项目中配置 Layui Vue
  2. 02实现表格、日期选择器和表单
  3. 03使用 Layer 创建弹窗或确认框
  4. 04查询组件属性、事件和方法

安装

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

$npx skills add https://github.com/partme-ai/full-stack-skills --skill layui-vue3

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

包含的文件

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

LICENSE.txt
api/
component-api.md
layer-api.md
examples/
getting-started.md
introduce.md
examples/components/
button.md
checkbox.md
date-picker.md
dropdown.md
form.md
input.md
layer.md
radio.md
segmented.md
select.md
switch.md
table.md
tag-input.md
time-select.md
tooltip.md
upload.md
templates/
component-usage.md
installation.md

详细介绍

适用场景

当用户希望执行以下操作时，请使用此技能：

  • 在 Vue 3 项目中安装并设置 Layui Vue
  • 使用 Layui Vue 组件（Button、Table、DatePicker 等）
  • 配置 Layui Vue（主题、i18n 等）
  • 使用 Layer 组件创建模态框和对话框
  • 使用 Layui Vue 组件实现表单
  • 使用支持排序和分页的数据表格
  • 处理文件上传
  • 创建下拉菜单和工具提示
  • 使用日期和时间选择器
  • 自定义组件样式
  • 了解 Layui Vue API 和方法
  • 排查 Layui Vue 问题

如何使用此技能

  1. 确定主题：根据用户的请求，在下方的映射中找到对应的示例文件

  2. 加载相应的示例文件：从 examples/ 目录中加载

  3. 遵循该示例文件中的具体说明，了解语法、结构和最佳实践

文档映射（与 https://www.layui-vue.com/zh-CN/ 一一对应）

指南（Guide）：

组件（Components） - examples/components/：

  • 查看 examples/components/ 目录中的组件文件

  • 每个组件文件对应 https://www.layui-vue.com/zh-CN/components/[component-name]

    重要说明：

    • Layui Vue 是为 Vue 3 构建的
    • 组件使用 Composition API
    • 支持 TypeScript
    • 示例包含 JavaScript 和 TypeScript 版本
    • 每个示例文件都包含关键概念、代码示例和要点

  1. 需要时查阅 api/ 目录中的 API 文档：

    • api/layer-api.md - Layer API 方法
    • api/component-api.md - 组件 API 参考

  2. 使用 templates/ 目录中的模板：

    • templates/installation.md - 安装模板
    • templates/component-usage.md - 组件使用模板
1. 了解 Layui Vue

Layui Vue 是一个 Vue 3 组件库，提供丰富的 UI 组件，并遵循 Layui 的设计理念。

关键概念：

  • 支持 Vue 3：基于 Vue 3 Composition API 构建
  • 丰富的组件：Button、Table、DatePicker、Layer 等
  • TypeScript：全面支持 TypeScript
  • 主题自定义：支持自定义主题
  • i18n：支持国际化
2. 安装

使用 npm：

npm install @layui/layui-vue

使用 yarn：

yarn add @layui/layui-vue

使用 pnpm：

pnpm add @layui/layui-vue
3. 基本设置
// main.js
import { createApp } from 'vue'
import LayuiVue from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(LayuiVue)
app.mount('#app')
4. 基本组件用法
<template>
  <lay-button type="primary">Button</lay-button>
</template>

<script setup>
import { LayButton } from '@layui/layui-vue'
</script>

示例和模板

此技能包含详细示例，按官方文档结构组织。所有示例都位于 examples/ 目录中（参见上方映射）。

使用示例：

  • 根据用户的请求确定主题
  • 从上方映射中加载相应的示例文件
  • 遵循该文件中的说明、语法和最佳实践
  • 根据具体使用场景调整代码示例

使用模板：

  • 参考 templates/ 目录中的模板，了解常见的脚手架结构
  • 根据具体需求和编码风格调整模板

API 参考

详细的 API 文档位于 api/ 目录中，按官方 Layui Vue API 文档结构组织：

Layer API（api/layer-api.md）
  • layer.open() - 打开模态框／对话框
  • layer.close() - 关闭图层
  • layer.msg() - 显示消息
  • layer.confirm() - 显示确认对话框
  • layer.load() - 显示加载状态
  • layer.drawer() - 显示抽屉
组件 API（api/component-api.md）
  • 组件属性和事件
  • 组件方法
  • 组件插槽

使用 API 参考：

  1. 确定需要帮助的 API
  2. 从 api/ 目录中加载对应的 API 文件
  3. 查找 API 签名、参数、返回类型和示例
  4. 参考链接的示例文件，了解详细用法
  5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

  1. 使用 TypeScript：利用 TypeScript 支持
  2. 按需导入：仅导入所需组件
  3. 遵循组件 API：正确使用 props 和事件
  4. 自定义主题：使用主题变量进行自定义
  5. 处理事件：妥善处理组件事件
  6. 使用 Layer API：使用 Layer API 创建模态框和对话框

资源

关键词

Layui Vue, layui-vue, Vue 3, 组件库, UI 组件, 按钮, 表格, 日期选择器, 弹层, 下拉菜单, 提示, 表单, 输入框, 选择器, 复选框, 单选框, 开关, 上传, 组件库, 按钮, 表格, 日期选择器, 弹层, 下拉菜单, 提示, 表单, 输入框, 选择器, 复选框, 单选框, 开关, 上传

评论

支持 Markdown