SKILL.md
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 (指南):
- See guide files in
examples/guide/orexamples/getting-started/→ https://www.uviewui.com/guide/demo.html
Components (组件):
- See component files in
examples/components/→ https://www.uviewui.com/components/intro.html
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
- Official Website: https://www.uviewui.com/
- Getting Started: https://www.uviewui.com/guide/demo.html
- Components: https://www.uviewui.com/components/intro.html
- UniApp Plugin: https://ext.dcloud.net.cn/plugin?id=1593
- GitHub Repository: https://github.com/umicro/uView
Keywords
uView UI, uView, uni-app, Vue 2, components, Button, Input, Form, Table, Modal, Toast, $u, tools, theme, customization, 组件库, 按钮, 输入框, 表单, 表格, 模态框, 提示, 工具函数, 主题定制
能力边界
✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
常见陷阱 (Gotchas)
- 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
- 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
- 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
- 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
- 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题
使用流程
Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
Step 2: 配置初始化
根据项目需求进行基础配置。
Step 3: 核心功能使用
按照示例代码实现核心功能。
Step 4: 测试验证
运行测试确保功能正常。
Step 5: 部署上线
完成开发后进行部署和监控。