Frontend
layui-vue3
Provides comprehensive guidance for Layui Vue component library including components, layer dialogs, and utilities. Use when the user asks about Layui Vue, needs to use Layui components in Vue 3, or implement UI components.
Provides comprehensive guidance for Layui Vue component library including components, layer dialogs, and utilities. Use when the user asks about Layui Vue, needs to use Layui components in Vue 3, or implement UI components.
Use this skill whenever the user wants to:
Identify the topic from the user's request and find the corresponding example file in the mapping below
Load the appropriate example file from the examples/ directory
Follow the specific instructions in that example file for syntax, structure, and best practices
Guide (指南):
examples/getting-started.md → https://www.layui-vue.com/zh-CN/indexexamples/introduce.md → https://www.layui-vue.com/zh-CN/guide/introduceComponents (组件) - examples/components/:
See component files in examples/components/ directory
Each component file maps to https://www.layui-vue.com/zh-CN/components/[component-name]
Important Notes:
Reference API documentation in the api/ directory when needed:
api/layer-api.md - Layer API methodsapi/component-api.md - Component API referenceUse templates from the templates/ directory:
templates/installation.md - Installation templatestemplates/component-usage.md - Component usage templatesLayui Vue is a Vue 3 component library that provides a rich set of UI components, following the design philosophy of Layui.
Key Concepts:
Using npm:
npm install @layui/layui-vue
Using yarn:
yarn add @layui/layui-vue
Using pnpm:
pnpm add @layui/layui-vue
// 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')
<template>
<lay-button type="primary">Button</lay-button>
</template>
<script setup>
import { LayButton } from '@layui/layui-vue'
</script>
This skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).
To use examples:
To use templates:
templates/ directory for common scaffoldingDetailed API documentation is available in the api/ directory, organized to match the official Layui Vue API documentation structure:
api/layer-api.md)layer.open() - Open modal/dialoglayer.close() - Close layerlayer.msg() - Show messagelayer.confirm() - Show confirmation dialoglayer.load() - Show loadinglayer.drawer() - Show drawerapi/component-api.md)To use API reference:
api/ directoryexamples/ directoryLayui Vue, layui-vue, Vue 3, component library, UI components, Button, Table, DatePicker, Layer, Dropdown, Tooltip, Form, Input, Select, Checkbox, Radio, Switch, Upload, 组件库, 按钮, 表格, 日期选择器, 弹层, 下拉菜单, 提示, 表单, 输入框, 选择器, 复选框, 单选框, 开关, 上传
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控。