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:

Identify the topic from the user's request:

Getting started/快速开始 →

examples/getting-started/installation.md

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

本技能的组织结构与uView UI官方文档结构一致（https://www.uviewui.com/guide/demo.html, https://www.uviewui.com/components/intro.html）。使用uView UI时：

从用户的请求中确定主题：

快速开始 →

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

从
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集成

遵循示例文件中的具体说明，包括语法、结构和最佳实践

重要说明:
- 所有示例均遵循uView UI Vue 2.0 API规范
- 示例使用uni-app语法
- 每个示例文件包含核心概念、代码示例和关键点
- 请务必查看示例文件获取最佳实践与通用模式
- uView UI专为uni-app（H5、小程序、App）设计
必要时参考
api/
目录中的API文档:
- ```
api/components.md
```
  - 组件API参考
- ```
api/tools.md
```
  - 工具API参考（$u方法）
- ```
api/theme-variables.md
```
  - 主题变量API

使用
templates/
目录中的模板:

```
templates/project-setup.md
```
- 项目配置模板
```
templates/component-template.md
```
- 组件使用模板

Doc mapping (one-to-one with official documentation)

文档映射（与官方文档一一对应）

Guide (指南):

See guide files in
```
examples/guide/
```
or
```
examples/getting-started/
```
→ https://www.uviewui.com/guide/demo.html

Components (组件):

See component files in
```
examples/components/
```
→ https://www.uviewui.com/components/intro.html

指南:

查看
```
examples/guide/
```
或
```
examples/getting-started/
```
中的指南文件 → https://www.uviewui.com/guide/demo.html

组件:

查看
```
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

本技能包含与官方文档结构匹配的详细示例，所有示例均位于

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:

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

SCSS变量
主题定制变量
颜色变量

使用API参考:

确定需要查询的API
从
```
api/
```
目录中加载对应的API文件
查找API签名、参数、返回类型和示例
参考关联的示例文件获取详细使用模式
所有API文件均包含指向
```
examples/
```
目录中相关示例文件的链接

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

引入uView UI: 在main.js中通过Vue.use()引入uView UI
引入样式: 在App.vue中引入uView UI样式
使用easycom: 在pages.json中配置easycom实现组件自动注册
使用$u工具: 使用$u对象调用实用函数
主题定制: 通过SCSS变量定制主题
uni-app兼容性: 在多平台（H5、小程序、App）进行测试
响应式设计: 使用rpx单位实现响应式布局
组件组合: 组合组件构建复杂UI
性能优化: 针对uni-app进行性能优化
无障碍访问: 遵循uni-app无障碍访问指南

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

官方网站: https://www.uviewui.com/
快速开始: https://www.uviewui.com/guide/demo.html
组件: https://www.uviewui.com/components/intro.html
UniApp插件: https://ext.dcloud.net.cn/plugin?id=1593
GitHub仓库: https://github.com/umicro/uView

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, 工具函数, 主题, 主题定制, 组件库, 按钮, 输入框, 表单, 表格, 模态框, 提示, 工具函数, 主题定制

uview-vue2

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

Doc mapping (one-to-one with official documentation)

文档映射（与官方文档一一对应）

Examples and Templates

示例与模板

API Reference

API参考

Components API (
`api/components.md`
)

组件API（
`api/components.md`
）

Tools API (
`api/tools.md`
)

工具API（
`api/tools.md`
）

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

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

Best Practices

最佳实践

Resources

资源

Keywords

关键词

uview-vue2

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

Doc mapping (one-to-one with official documentation)

文档映射（与官方文档一一对应）

Examples and Templates

示例与模板

API Reference

API参考

Components API (api/components.md)

组件API（api/components.md）

Tools API (api/tools.md)

工具API（api/tools.md）

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

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

Best Practices

最佳实践

Resources

资源

Keywords

关键词

Components API (
`api/components.md`
)

组件API（
`api/components.md`
）

Tools API (
`api/tools.md`
)

工具API（
`api/tools.md`
）

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

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