名称: layui-vue3 描述: 提供Layui Vue组件库的全面指南，包括组件、层对话框和工具。当用户询问Layui Vue，需要在Vue 3中使用Layui组件或实现UI组件时使用。许可证: 完整条款见LICENSE.txt

何时使用此技能

每当用户想要：

在Vue 3项目中安装和设置Layui Vue
使用Layui Vue组件（按钮、表格、日期选择器等）
配置Layui Vue（主题、国际化等）
使用Layer组件进行模态框和对话框
使用Layui Vue组件实现表单
使用具有排序和分页的数据表格
处理文件上传
创建下拉菜单和工具提示
使用日期和时间选择器
自定义组件样式
理解Layui Vue API和方法
解决Layui Vue问题

如何使用此技能

识别主题 从用户的请求中，并在下面的映射中找到相应的示例文件
加载适当的示例文件 从 examples/ 目录
遵循具体指令 在该示例文件中，关于语法、结构和最佳实践

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

指南:

examples/getting-started.md → https://www.layui-vue.com/zh-CN/index
examples/introduce.md → https://www.layui-vue.com/zh-CN/guide/introduce

组件 - examples/components/:

查看 examples/components/ 目录中的组件文件
每个组件文件映射到 https://www.layui-vue.com/zh-CN/components/[component-name]

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

参考API文档 在需要时，从 api/ 目录：
- api/layer-api.md - Layer API 方法
- api/component-api.md - 组件API参考
使用模板 从 templates/ 目录：
- templates/installation.md - 安装模板
- templates/component-usage.md - 组件使用模板

1. 理解Layui Vue

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

关键概念:

Vue 3 支持: 使用 Vue 3 Composition API 构建
丰富组件: 按钮、表格、日期选择器、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">按钮</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() - 显示抽屉

Component API (`api/component-api.md`)

组件属性和事件
组件方法
组件插槽

使用API参考:

识别您需要的API
从 api/ 目录加载相应的API文件
查找API签名、参数、返回类型和示例
参考链接的示例文件以获取详细使用模式
所有API文件包括到 examples/ 目录中相关示例文件的链接

最佳实践

使用TypeScript: 利用TypeScript支持
按需导入: 只导入需要的组件
遵循组件API: 正确使用属性和事件
定制主题: 使用主题变量进行定制
处理事件: 正确处理组件事件
使用Layer API: 使用Layer API进行模态框和对话框

资源

官方文档: https://www.layui-vue.com/zh-CN/index
入门指南: https://www.layui-vue.com/zh-CN/guide/introduce
组件: https://www.layui-vue.com/zh-CN/components
GitHub仓库: https://github.com/layui-vue/layui-vue

关键词

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

名称: layui-vue3 描述: 提供Layui Vue组件库的全面指南，包括组件、层对话框和工具。当用户询问Layui Vue，需要在Vue 3中使用Layui组件或实现UI组件时使用。 许可证: 完整条款见LICENSE.txt