Back to Details

uview-vue2

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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
当用户有以下需求时，均可使用本技能：
  • 使用uView UI组件构建uni-app应用
  • 使用uView UI组件（Button、Input、Form、Table、Modal等）
  • 使用uView UI工具（$u.toast、$u.http等）
  • 定制uView UI主题
  • 将uView UI与uni-app集成
  • 使用uView UI创建响应式布局
  • 使用uView UI表单组件
  • 使用uView UI组件展示数据
  • 使用uView UI处理导航
  • 使用uView UI实用工具与辅助函数

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:
  1. 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
  2. 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
  3. 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)
  4. 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
  5. Use templates from the 
    templates/
    directory:
    • templates/project-setup.md
      - Project setup templates
    • templates/component-template.md
      - Component usage templates
本技能的组织结构与uView UI官方文档结构一致（https://www.uviewui.com/guide/demo.html, https://www.uviewui.com/components/intro.html）。使用uView UI时：
  1. 从用户的请求中确定主题：
    • 快速开始 → 
      examples/getting-started/installation.md
      或 
      examples/getting-started/basic-usage.md
    • 按钮 → 
      examples/components/button.md
    • 输入框 → 
      examples/components/input.md
    • 表单 → 
      examples/components/form.md
    • 表格 → 
      examples/components/table.md
    • 模态框 → 
      examples/components/modal.md
    • 提示 → 
      examples/tools/toast.md
    • 请求 → 
      examples/tools/http.md
    • 主题 → 
      examples/advanced/theme-customization.md
  2. 从
    examples/
    目录中加载对应的示例文件    ：
    快速开始 - 
    examples/getting-started/
    :
    • examples/getting-started/installation.md
      - uView UI的安装与基础配置
    • examples/getting-started/basic-usage.md
      - 组件基础使用方法
    • examples/getting-started/design-principles.md
      - 设计原则与最佳实践
    组件 - 
    examples/components/
    :
    • examples/components/button.md
      - Button组件
    • examples/components/input.md
      - Input组件
    • examples/components/form.md
      - Form组件
    • examples/components/table.md
      - Table组件
    • examples/components/modal.md
      - Modal组件
    • examples/components/toast.md
      - Toast组件
    • examples/components/loading.md
      - Loading组件
    • examples/components/picker.md
      - Picker组件
    • examples/components/tabs.md
      - Tabs组件
    • examples/components/navbar.md
      - Navbar组件
    • examples/components/grid.md
      - Grid组件
    • examples/components/card.md
      - Card组件
    • examples/components/badge.md
      - Badge组件
    • examples/components/swiper.md
      - Swiper组件
    • examples/components/list.md
      - List组件
    工具 - 
    examples/tools/
    :
    • examples/tools/toast.md
      - Toast工具（$u.toast）
    • examples/tools/http.md
      - Http工具（$u.http）
    • examples/tools/storage.md
      - Storage工具（$u.storage）
    • examples/tools/route.md
      - Route工具（$u.route）
    • examples/tools/debounce.md
      - 防抖工具
    • examples/tools/throttle.md
      - 节流工具
    高级 - 
    examples/advanced/
    :
    • examples/advanced/theme-customization.md
      - 定制uView UI主题
    • examples/advanced/uniapp-integration.md
      - uni-app集成
  3. 遵循示例文件中的具体说明，包括语法、结构和最佳实践
    重要说明:
    • 所有示例均遵循uView UI Vue 2.0 API规范
    • 示例使用uni-app语法
    • 每个示例文件包含核心概念、代码示例和关键点
    • 请务必查看示例文件获取最佳实践与通用模式
    • uView UI专为uni-app（H5、小程序、App）设计
  4. 必要时参考
    api/
    目录中的API文档    :
    • api/components.md
      - 组件API参考
    • api/tools.md
      - 工具API参考（$u方法）
    • api/theme-variables.md
      - 主题变量API
  5. 使用
    templates/
    目录中的模板    :
    • templates/project-setup.md
      - 项目配置模板
    • templates/component-template.md
      - 组件使用模板

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
本技能包含与官方文档结构匹配的详细示例，所有示例均位于
examples/
目录中（参见上方映射关系）。
使用示例:
  • 从用户请求中确定主题
  • 根据上方映射加载对应的示例文件
  • 遵循文件中的说明、语法和最佳实践
  • 根据具体需求调整代码示例
使用模板:
  • 参考
    templates/
    目录中的模板进行通用脚手架搭建
  • 根据具体需求和编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the 
api/
directory, organized to match the official uView UI API documentation structure:
详细的API文档位于
api/
目录中，组织结构与uView UI官方API文档一致:

Components API (
api/components.md
)

组件API（
api/components.md
）

  • All component props and APIs
  • Component events and slots
  • Component types and interfaces
  • 所有组件的属性与API
  • 组件事件与插槽
  • 组件类型与接口

Tools API (
api/tools.md
)

工具API（
api/tools.md
）

  • $u object methods
  • Toast, Http, Storage, Route tools
  • Utility functions
  • $u对象方法
  • Toast、Http、Storage、Route工具
  • 实用函数

Theme Variables API (
api/theme-variables.md
)

主题变量API（
api/theme-variables.md
）

  • SCSS variables
  • Theme customization variables
  • Color variables
To use API reference:
  1. Identify the API you need help with
  2. Load the corresponding API file from the 
    api/
    directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the 
    examples/
    directory
  • SCSS变量
  • 主题定制变量
  • 颜色变量
使用API参考:
  1. 确定需要查询的API
  2. 从
    api/
    目录中加载对应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考关联的示例文件获取详细使用模式
  5. 所有API文件均包含指向
    examples/
    目录中相关示例文件的链接

Best Practices

最佳实践

  1. Import uView UI: Import uView UI in main.js with Vue.use()
  2. Import styles: Import uView UI styles in App.vue
  3. Use easycom: Configure easycom in pages.json for automatic component registration
  4. Use $u tools: Use $u object for utility functions
  5. Theme customization: Customize theme via SCSS variables
  6. UniApp compatibility: Test on multiple platforms (H5, 小程序, App)
  7. Responsive design: Use rpx units for responsive layouts
  8. Component composition: Compose components for complex UIs
  9. Performance: Optimize for uni-app performance
  10. Accessibility: Follow uni-app accessibility guidelines
  1. 引入uView UI: 在main.js中通过Vue.use()引入uView UI
  2. 引入样式: 在App.vue中引入uView UI样式
  3. 使用easycom: 在pages.json中配置easycom实现组件自动注册
  4. 使用$u工具: 使用$u对象调用实用函数
  5. 主题定制: 通过SCSS变量定制主题
  6. uni-app兼容性: 在多平台（H5、小程序、App）进行测试
  7. 响应式设计: 使用rpx单位实现响应式布局
  8. 组件组合: 组合组件构建复杂UI
  9. 性能优化: 针对uni-app进行性能优化
  10. 无障碍访问: 遵循uni-app无障碍访问指南

Resources

资源

Keywords

关键词

uView UI, uView, uni-app, Vue 2, components, Button, Input, Form, Table, Modal, Toast, $u, tools, theme, customization, 组件库, 按钮, 输入框, 表单, 表格, 模态框, 提示, 工具函数, 主题定制
uView UI, uView, uni-app, Vue 2, 组件, Button, Input, Form, Table, Modal, Toast, $u, 工具函数, 主题, 主题定制, 组件库, 按钮, 输入框, 表单, 表格, 模态框, 提示, 工具函数, 主题定制