When to use this skill
Use this skill whenever the user wants to:
- Build uni-app applications with uView UI components
- Use uView UI components (Button, Input, Form, Table, Modal, etc.)
- Use uView UI tools ($u.toast, $u.http, etc.)
- Customize uView UI theme
- Integrate uView UI with uni-app
- Create responsive layouts with uView UI
- Use uView UI form components
- Display data with uView UI components
- Handle navigation with uView UI
- Use uView UI utilities and helpers
How to use this skill
This skill is organized to match the uView UI official documentation structure (https://www.uviewui.com/guide/demo.html, https://www.uviewui.com/components/intro.html). When working with uView UI:
Identify the topic from the user's request:
- Getting started/快速开始 →
examples/getting-started/installation.md or examples/getting-started/basic-usage.md
- Button/按钮 →
examples/components/button.md
- Input/输入框 →
examples/components/input.md
- Form/表单 →
examples/components/form.md
- Table/表格 →
examples/components/table.md
- Modal/模态框 →
examples/components/modal.md
- Toast/提示 →
examples/tools/toast.md
- Http/请求 →
examples/tools/http.md
- Theme/主题 →
examples/advanced/theme-customization.md
Load the appropriate example file from the examples/ directory:
Getting Started (快速开始) - examples/getting-started/:
examples/getting-started/installation.md - Installing uView UI and basic setup
examples/getting-started/basic-usage.md - Basic component usage
examples/getting-started/design-principles.md - Design principles and best practices
Components (组件) - examples/components/:
examples/components/button.md - Button component
examples/components/input.md - Input component
examples/components/form.md - Form component
examples/components/table.md - Table component
examples/components/modal.md - Modal component
examples/components/toast.md - Toast component
examples/components/loading.md - Loading component
examples/components/picker.md - Picker component
examples/components/tabs.md - Tabs component
examples/components/navbar.md - Navbar component
examples/components/grid.md - Grid component
examples/components/card.md - Card component
examples/components/badge.md - Badge component
examples/components/swiper.md - Swiper component
examples/components/list.md - List component
Tools (工具) - examples/tools/:
examples/tools/toast.md - Toast tool ($u.toast)
examples/tools/http.md - Http tool ($u.http)
examples/tools/storage.md - Storage tool ($u.storage)
examples/tools/route.md - Route tool ($u.route)
examples/tools/debounce.md - Debounce tool
examples/tools/throttle.md - Throttle tool
Advanced (高级) - examples/advanced/:
examples/advanced/theme-customization.md - Customizing uView UI theme
examples/advanced/uniapp-integration.md - UniApp integration
Follow the specific instructions in that example file for syntax, structure, and best practices
Important Notes:
- All examples follow uView UI Vue 2.0 API
- Examples use uni-app syntax
- Each example file includes key concepts, code examples, and key points
- Always check the example file for best practices and common patterns
- uView UI is designed for uni-app (H5, 小程序, App)
Reference API documentation in the api/ directory when needed:
api/components.md - Component API reference
api/tools.md - Tools API reference ($u methods)
api/theme-variables.md - Theme variables API
Use templates from the templates/ directory:
templates/project-setup.md - Project setup templates
templates/component-template.md - Component usage templates
Doc mapping (one-to-one with official documentation)
Guide (指南):
Components (组件):
Examples and Templates
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:
- Identify the topic from the user's request
- Load the appropriate example file from the mapping above
- Follow the instructions, syntax, and best practices in that file
- Adapt the code examples to your specific use case
To use templates:
- Reference templates in
templates/ directory for common scaffolding
- Adapt templates to your specific needs and coding style
API Reference
Detailed API documentation is available in the api/ directory, organized to match the official uView UI API documentation structure:
Components API (api/components.md)
- All component props and APIs
- Component events and slots
- Component types and interfaces
Tools API (api/tools.md)
- $u object methods
- Toast, Http, Storage, Route tools
- Utility functions
Theme Variables API (api/theme-variables.md)
- SCSS variables
- Theme customization variables
- Color variables
To use API reference:
- Identify the API you need help with
- Load the corresponding API file from the
api/ directory
- Find the API signature, parameters, return type, and examples
- Reference the linked example files for detailed usage patterns
- All API files include links to relevant example files in the
examples/ directory
Best Practices
- Import uView UI: Import uView UI in main.js with Vue.use()
- Import styles: Import uView UI styles in App.vue
- Use easycom: Configure easycom in pages.json for automatic component registration
- Use $u tools: Use $u object for utility functions
- Theme customization: Customize theme via SCSS variables
- UniApp compatibility: Test on multiple platforms (H5, 小程序, App)
- Responsive design: Use rpx units for responsive layouts
- Component composition: Compose components for complex UIs
- Performance: Optimize for uni-app performance
- Accessibility: Follow uni-app accessibility guidelines
Resources
Keywords
uView UI, uView, uni-app, Vue 2, components, Button, Input, Form, Table, Modal, Toast, $u, tools, theme, customization, 组件库, 按钮, 输入框, 表单, 表格, 模态框, 提示, 工具函数, 主题定制
1---2name: uview-vue23description: Provides comprehensive guidance for uView Vue 2 component library including components, tools, and layouts. Use when the user asks about uView for Vue 2, needs to build Vue 2 applications with uView, or use uView components.4license: Complete terms in LICENSE.txt5---6
7## When to use this skill
8
9Use this skill whenever the user wants to:
10- Build uni-app applications with uView UI components
11- Use uView UI components (Button, Input, Form, Table, Modal, etc.)
12- Use uView UI tools ($u.toast, $u.http, etc.)
13- Customize uView UI theme
14- Integrate uView UI with uni-app
15- Create responsive layouts with uView UI
16- Use uView UI form components
17- Display data with uView UI components
18- Handle navigation with uView UI
19- Use uView UI utilities and helpers
20
21## How to use this skill
22
23This skill is organized to match the uView UI official documentation structure (https://www.uviewui.com/guide/demo.html, https://www.uviewui.com/components/intro.html). When working with uView UI:
24
251. **Identify the topic** from the user's request:
26 - Getting started/快速开始 → `examples/getting-started/installation.md` or `examples/getting-started/basic-usage.md`
27 - Button/按钮 → `examples/components/button.md`
28 - Input/输入框 → `examples/components/input.md`
29 - Form/表单 → `examples/components/form.md`
30 - Table/表格 → `examples/components/table.md`
31 - Modal/模态框 → `examples/components/modal.md`
32 - Toast/提示 → `examples/tools/toast.md`
33 - Http/请求 → `examples/tools/http.md`
34 - Theme/主题 → `examples/advanced/theme-customization.md`
35
362. **Load the appropriate example file** from the `examples/` directory:
37
38 **Getting Started (快速开始) - `examples/getting-started/`**:
39 - `examples/getting-started/installation.md` - Installing uView UI and basic setup
40 - `examples/getting-started/basic-usage.md` - Basic component usage
41 - `examples/getting-started/design-principles.md` - Design principles and best practices
42
43 **Components (组件) - `examples/components/`**:
44 - `examples/components/button.md` - Button component
45 - `examples/components/input.md` - Input component
46 - `examples/components/form.md` - Form component
47 - `examples/components/table.md` - Table component
48 - `examples/components/modal.md` - Modal component
49 - `examples/components/toast.md` - Toast component
50 - `examples/components/loading.md` - Loading component
51 - `examples/components/picker.md` - Picker component
52 - `examples/components/tabs.md` - Tabs component
53 - `examples/components/navbar.md` - Navbar component
54 - `examples/components/grid.md` - Grid component
55 - `examples/components/card.md` - Card component
56 - `examples/components/badge.md` - Badge component
57 - `examples/components/swiper.md` - Swiper component
58 - `examples/components/list.md` - List component
59
60 **Tools (工具) - `examples/tools/`**:
61 - `examples/tools/toast.md` - Toast tool ($u.toast)
62 - `examples/tools/http.md` - Http tool ($u.http)
63 - `examples/tools/storage.md` - Storage tool ($u.storage)
64 - `examples/tools/route.md` - Route tool ($u.route)
65 - `examples/tools/debounce.md` - Debounce tool
66 - `examples/tools/throttle.md` - Throttle tool
67
68 **Advanced (高级) - `examples/advanced/`**:
69 - `examples/advanced/theme-customization.md` - Customizing uView UI theme
70 - `examples/advanced/uniapp-integration.md` - UniApp integration
71
723. **Follow the specific instructions** in that example file for syntax, structure, and best practices
73
74 **Important Notes**:
75 - All examples follow uView UI Vue 2.0 API
76 - Examples use uni-app syntax
77 - Each example file includes key concepts, code examples, and key points
78 - Always check the example file for best practices and common patterns
79 - uView UI is designed for uni-app (H5, 小程序, App)
80
814. **Reference API documentation** in the `api/` directory when needed:
82 - `api/components.md` - Component API reference
83 - `api/tools.md` - Tools API reference ($u methods)
84 - `api/theme-variables.md` - Theme variables API
85
865. **Use templates** from the `templates/` directory:
87 - `templates/project-setup.md` - Project setup templates
88 - `templates/component-template.md` - Component usage templates
89
90
91### Doc mapping (one-to-one with official documentation)
92
93**Guide (指南)**:
94- See guide files in `examples/guide/` or `examples/getting-started/` → https://www.uviewui.com/guide/demo.html
95
96**Components (组件)**:
97- See component files in `examples/components/` → https://www.uviewui.com/components/intro.html
98
99## Examples and Templates
100
101This skill includes detailed examples organized to match the official documentation structure. All examples are in the `examples/` directory (see mapping above).
102
103**To use examples:**
104- Identify the topic from the user's request
105- Load the appropriate example file from the mapping above
106- Follow the instructions, syntax, and best practices in that file
107- Adapt the code examples to your specific use case
108
109**To use templates:**
110- Reference templates in `templates/` directory for common scaffolding
111- Adapt templates to your specific needs and coding style
112
113## API Reference
114
115Detailed API documentation is available in the `api/` directory, organized to match the official uView UI API documentation structure:
116
117### Components API (`api/components.md`)
118- All component props and APIs
119- Component events and slots
120- Component types and interfaces
121
122### Tools API (`api/tools.md`)
123- $u object methods
124- Toast, Http, Storage, Route tools
125- Utility functions
126
127### Theme Variables API (`api/theme-variables.md`)
128- SCSS variables
129- Theme customization variables
130- Color variables
131
132**To use API reference:**
1331. Identify the API you need help with
1342. Load the corresponding API file from the `api/` directory
1353. Find the API signature, parameters, return type, and examples
1364. Reference the linked example files for detailed usage patterns
1375. All API files include links to relevant example files in the `examples/` directory
138
139## Best Practices
140
1411. **Import uView UI**: Import uView UI in main.js with Vue.use()
1422. **Import styles**: Import uView UI styles in App.vue
1433. **Use easycom**: Configure easycom in pages.json for automatic component registration
1444. **Use $u tools**: Use $u object for utility functions
1455. **Theme customization**: Customize theme via SCSS variables
1466. **UniApp compatibility**: Test on multiple platforms (H5, 小程序, App)
1477. **Responsive design**: Use rpx units for responsive layouts
1488. **Component composition**: Compose components for complex UIs
1499. **Performance**: Optimize for uni-app performance
15010. **Accessibility**: Follow uni-app accessibility guidelines
151
152## Resources
153
154- **Official Website**: https://www.uviewui.com/
155- **Getting Started**: https://www.uviewui.com/guide/demo.html
156- **Components**: https://www.uviewui.com/components/intro.html
157- **UniApp Plugin**: https://ext.dcloud.net.cn/plugin?id=1593
158- **GitHub Repository**: https://github.com/umicro/uView
159
160## Keywords
161
162uView UI, uView, uni-app, Vue 2, components, Button, Input, Form, Table, Modal, Toast, $u, tools, theme, customization, 组件库, 按钮, 输入框, 表单, 表格, 模态框, 提示, 工具函数, 主题定制