uview-pro-vue3

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:

Install and set up uView Pro in a uni-app project
Use uView Pro components in Vue 3 / uni-app applications
Configure uView Pro (theme, i18n, etc.)
Use form components (Button, Input, Form, etc.)
Use data display components (List, Card, etc.)
Use feedback components (Toast, Modal, etc.)
Use navigation components (Tabs, NavBar, etc.)
Use uView Pro tools and utilities
Use uView Pro layout templates
Customize component styles and themes
Handle component events
Understand uView Pro API and methods
Troubleshoot uView Pro issues

当用户有以下需求时，可使用本技能：

在uni-app项目中安装和配置uView Pro
在Vue 3 / uni-app应用中使用uView Pro组件
配置uView Pro（主题、国际化等）
使用表单组件（Button、Input、Form等）
使用数据展示组件（List、Card等）
使用反馈组件（Toast、Modal等）
使用导航组件（Tabs、NavBar等）
使用uView Pro工具及实用函数
使用uView Pro布局模板
自定义组件样式与主题
处理组件事件
了解uView Pro API及方法
排查uView Pro相关问题

How to use this skill

如何使用本技能

This skill is organized to match the uView Pro official documentation structure (https://uviewpro.cn/, https://uviewpro.cn/zh/guide/intro.html, https://uviewpro.cn/zh/components/intro.html, https://uviewpro.cn/zh/tools/intro.html, https://uviewpro.cn/zh/layout/intro.html). When working with uView Pro:

Identify the topic from the user's request:
- Installation/安装 →
```
examples/guide/installation.md
```
- Quick Start/快速开始 →
```
examples/guide/quick-start.md
```
- Components/组件 →
```
examples/components/
```
- Tools/工具 →
```
examples/tools/
```
- Layout/布局 →
```
examples/layout/
```
- API/API 文档 →
```
api/
```

Load the appropriate example file from the

examples/

directory:

Guide (使用指南):

```
examples/guide/intro.md
```
- Introduction
```
examples/guide/installation.md
```
- Installation guide
```
examples/guide/quick-start.md
```
- Quick start guide
```
examples/guide/theme.md
```
- Theme customization
```
examples/guide/i18n.md
```
- Internationalization
```
examples/guide/config.md
```
- Configuration

Components (组件):

```
examples/components/intro.md
```
- Components introduction
```
examples/components/button.md
```
- Button component
```
examples/components/input.md
```
- Input component
```
examples/components/form.md
```
- Form component
```
examples/components/list.md
```
- List component
```
examples/components/card.md
```
- Card component
```
examples/components/toast.md
```
- Toast component
```
examples/components/modal.md
```
- Modal component
```
examples/components/tabs.md
```
- Tabs component
```
examples/components/navbar.md
```
- NavBar component
```
examples/components/date-picker.md
```
- DatePicker component
```
examples/components/select.md
```
- Select component
```
examples/components/switch.md
```
- Switch component
```
examples/components/checkbox.md
```
- Checkbox component
```
examples/components/radio.md
```
- Radio component
```
examples/components/upload.md
```
- Upload component
```
examples/components/pagination.md
```
- Pagination component
```
examples/components/avatar.md
```
- Avatar component
```
examples/components/badge.md
```
- Badge component
```
examples/components/tag.md
```
- Tag component
```
examples/components/empty.md
```
- Empty component
```
examples/components/loading.md
```
- Loading component
```
examples/components/popup.md
```
- Popup component
```
examples/components/dropdown.md
```
- Dropdown component
```
examples/components/drawer.md
```
- Drawer component

Tools (工具):

```
examples/tools/intro.md
```
- Tools introduction
```
examples/tools/http.md
```
- HTTP request
```
examples/tools/storage.md
```
- Storage utilities
```
examples/tools/router.md
```
- Router utilities
```
examples/tools/validator.md
```
- Validator utilities
```
examples/tools/format.md
```
- Format utilities
```
examples/tools/color.md
```
- Color utilities

Layout (布局):

```
examples/layout/intro.md
```
- Layout introduction
```
examples/layout/grid.md
```
- Grid layout
```
examples/layout/flex.md
```
- Flex layout
```
examples/layout/container.md
```
- Container layout

Follow the specific instructions in that example file for syntax, structure, and best practices

Important Notes:
- uView Pro is for Vue 3 and uni-app
- Components use Vue 3 Composition API
- Examples include both Options API and Composition API
- Each example file includes key concepts, code examples, and key points
Reference API documentation in the
```
api/
```
directory when needed:
- ```
api/component-api.md
```
  - Component API reference
- ```
api/props-and-events.md
```
  - Props and events reference
- ```
api/tools-api.md
```
  - Tools API reference
- ```
api/config-api.md
```
  - Configuration API
Use templates from the
```
templates/
```
directory:
- ```
templates/installation.md
```
  - Installation templates
- ```
templates/component-usage.md
```
  - Component usage templates
- ```
templates/project-setup.md
```
  - Project setup templates

本技能的组织结构与uView Pro官方文档结构一致（https://uviewpro.cn/、https://uviewpro.cn/zh/guide/intro.html、https://uviewpro.cn/zh/components/intro.html、https://uviewpro.cn/zh/tools/intro.html、https://uviewpro.cn/zh/layout/intro.html）。使用uView Pro时：

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

安装 →
```
examples/guide/installation.md
```
快速开始 →
```
examples/guide/quick-start.md
```
组件 →
```
examples/components/
```
工具 →
```
examples/tools/
```
布局 →
```
examples/layout/
```
API文档 →
```
api/
```

从
examples/
目录加载对应的示例文件：

使用指南：

```
examples/guide/intro.md
```
- 介绍
```
examples/guide/installation.md
```
- 安装指南
```
examples/guide/quick-start.md
```
- 快速开始指南
```
examples/guide/theme.md
```
- 主题定制
```
examples/guide/i18n.md
```
- 国际化
```
examples/guide/config.md
```
- 配置

组件：

```
examples/components/intro.md
```
- 组件介绍
```
examples/components/button.md
```
- Button组件
```
examples/components/input.md
```
- Input组件
```
examples/components/form.md
```
- Form组件
```
examples/components/list.md
```
- List组件
```
examples/components/card.md
```
- Card组件
```
examples/components/toast.md
```
- Toast组件
```
examples/components/modal.md
```
- Modal组件
```
examples/components/tabs.md
```
- Tabs组件
```
examples/components/navbar.md
```
- NavBar组件
```
examples/components/date-picker.md
```
- DatePicker组件
```
examples/components/select.md
```
- Select组件
```
examples/components/switch.md
```
- Switch组件
```
examples/components/checkbox.md
```
- Checkbox组件
```
examples/components/radio.md
```
- Radio组件
```
examples/components/upload.md
```
- Upload组件
```
examples/components/pagination.md
```
- Pagination组件
```
examples/components/avatar.md
```
- Avatar组件
```
examples/components/badge.md
```
- Badge组件
```
examples/components/tag.md
```
- Tag组件
```
examples/components/empty.md
```
- Empty组件
```
examples/components/loading.md
```
- Loading组件
```
examples/components/popup.md
```
- Popup组件
```
examples/components/dropdown.md
```
- Dropdown组件
```
examples/components/drawer.md
```
- Drawer组件

工具：

```
examples/tools/intro.md
```
- 工具介绍
```
examples/tools/http.md
```
- HTTP请求
```
examples/tools/storage.md
```
- 存储工具
```
examples/tools/router.md
```
- 路由工具
```
examples/tools/validator.md
```
- 验证工具
```
examples/tools/format.md
```
- 格式化工具
```
examples/tools/color.md
```
- 颜色工具

布局：

```
examples/layout/intro.md
```
- 布局介绍
```
examples/layout/grid.md
```
- 网格布局
```
examples/layout/flex.md
```
- 弹性布局
```
examples/layout/container.md
```
- 容器布局

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

重要说明：
- uView Pro适用于Vue 3和uni-app
- 组件使用Vue 3组合式API
- 示例包含选项式API和组合式API两种写法
- 每个示例文件都包含核心概念、代码示例及关键点
必要时参考
api/
目录下的API文档：
- ```
api/component-api.md
```
  - 组件API参考
- ```
api/props-and-events.md
```
  - 属性与事件参考
- ```
api/tools-api.md
```
  - 工具API参考
- ```
api/config-api.md
```
  - 配置API

使用
templates/
目录下的模板：

```
templates/installation.md
```
- 安装模板
```
templates/component-usage.md
```
- 组件使用模板
```
templates/project-setup.md
```
- 项目搭建模板

1. Understanding uView Pro

1. 了解uView Pro

uView Pro is a Vue 3 component library designed for uni-app development, providing rich components and utility methods.

Key Concepts:

Vue 3 Support: Built for Vue 3 with Composition API
uni-app Support: Optimized for uni-app development
Rich Components: 100+ components for various use cases
Theme Customization: Support for theme customization
i18n: Internationalization support
Tools: Rich utility methods

uView Pro是专为uni-app开发设计的Vue 3组件库，提供丰富的组件及实用方法。

核心概念：

Vue 3支持：基于Vue 3组合式API构建
uni-app支持：针对uni-app开发优化
丰富组件：100+适用于各类场景的组件
主题定制：支持主题自定义
国际化：支持多语言国际化
工具集：丰富的实用方法

2. Installation

2. 安装

Using npm:

bash

npm install uview-pro

Using yarn:

bash

yarn add uview-pro

Using pnpm:

bash

pnpm add uview-pro

使用npm安装：

bash

npm install uview-pro

使用yarn安装：

bash

yarn add uview-pro

使用pnpm安装：

bash

pnpm add uview-pro

3. Basic Setup

3. 基础配置

javascript

// main.js
import { createSSRApp } from 'vue'
import uView from 'uview-pro'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uView)
  return {
    app
  }
}

javascript

// main.js
import { createSSRApp } from 'vue'
import uView from 'uview-pro'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uView)
  return {
    app
  }
}

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

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

Guide (指南):

See guide files in
```
examples/guide/
```
or
```
examples/getting-started/
```
→ https://uviewpro.cn/zh/guide/intro.html

Components (组件):

See component files in
```
examples/components/
```
→ https://uviewpro.cn/zh/components/intro.html

指南：

查看
```
examples/guide/
```
或
```
examples/getting-started/
```
下的指南文件 → https://uviewpro.cn/zh/guide/intro.html

组件：

查看
```
examples/components/
```
下的组件文件 → https://uviewpro.cn/zh/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 Pro API documentation structure:

详细的API文档位于

api/

目录，组织结构与uView Pro官方API文档一致：

Component API (

api/component-api.md

)

组件API (

api/component-api.md

)

Component props and events
Component methods
Component slots

组件属性与事件
组件方法
组件插槽

Props and Events (

api/props-and-events.md

)

属性与事件 (

api/props-and-events.md

)

Common props
Common events
Event handling

通用属性
通用事件
事件处理

Tools API (

api/tools-api.md

)

工具API (

api/tools-api.md

)

HTTP request methods
Storage methods
Router methods
Validator methods
Format methods
Color methods

HTTP请求方法
存储方法
路由方法
验证方法
格式化方法
颜色方法

Configuration API (

api/config-api.md

)

配置API (

api/config-api.md

)

Global configuration options
Theme configuration
i18n configuration

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

全局配置选项
主题配置
国际化配置

使用API参考：

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

Best Practices

最佳实践

Use on-demand import: Import only the components you need to reduce bundle size
Use Composition API: Prefer Composition API for better code organization
Handle events properly: Use proper event handlers for component interactions
Customize theme: Use theme variables for customization
Follow design specs: Follow uView Pro design specifications
Use tools: Leverage uView Pro tools for common operations
Use layouts: Use layout templates for consistent page structure

按需引入：仅引入所需组件以减小打包体积
使用组合式API：优先使用组合式API以优化代码结构
正确处理事件：为组件交互使用合适的事件处理器
自定义主题：使用主题变量进行定制
遵循设计规范：遵循uView Pro的设计规范
使用工具集：利用uView Pro工具处理常见操作
使用布局：使用布局模板保证页面结构一致性

Resources

资源

Official Documentation: https://uviewpro.cn/
Guide: https://uviewpro.cn/zh/guide/intro.html
Components: https://uviewpro.cn/zh/components/intro.html
Tools: https://uviewpro.cn/zh/tools/intro.html
Layout: https://uviewpro.cn/zh/layout/intro.html

官方文档：https://uviewpro.cn/
指南：https://uviewpro.cn/zh/guide/intro.html
组件：https://uviewpro.cn/zh/components/intro.html
工具：https://uviewpro.cn/zh/tools/intro.html
布局：https://uviewpro.cn/zh/layout/intro.html

Keywords

关键词

uView Pro, uview-pro, Vue 3, Vue3, uni-app, UI components, component library, 组件库, 按钮, 表单, 列表, 卡片, 提示, 弹窗, 标签页, 导航栏, 日期选择器, 选择器, 开关, 复选框, 单选框, 上传, 分页, 头像, 徽标, 标签, 空状态, 加载, 弹出层, 下拉菜单, 抽屉, HTTP, 存储, 路由, 验证, 格式化, 颜色, 网格布局, 弹性布局, 容器布局, Button, Form, List, Card, Toast, Modal, Tabs, NavBar, DatePicker, Select, Switch, Checkbox, Radio, Upload, Pagination, Avatar, Badge, Tag, Empty, Loading, Popup, Dropdown, Drawer

uview-pro-vue3

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

1. Understanding uView Pro

1. 了解uView Pro

2. Installation

2. 安装

3. Basic Setup

3. 基础配置

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

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

Examples and Templates

示例与模板

API Reference

API参考

Component API (
`api/component-api.md`
)

组件API (
`api/component-api.md`
)

Props and Events (
`api/props-and-events.md`
)

属性与事件 (
`api/props-and-events.md`
)

Tools API (
`api/tools-api.md`
)

工具API (
`api/tools-api.md`
)

Configuration API (
`api/config-api.md`
)

配置API (
`api/config-api.md`
)

Best Practices

最佳实践

Resources

资源

Keywords

关键词

uview-pro-vue3

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

1. Understanding uView Pro

1. 了解uView Pro

2. Installation

2. 安装

3. Basic Setup

3. 基础配置

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

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

Examples and Templates

示例与模板

API Reference

API参考

Component API (api/component-api.md)

组件API (api/component-api.md)

Props and Events (api/props-and-events.md)

属性与事件 (api/props-and-events.md)

Tools API (api/tools-api.md)

工具API (api/tools-api.md)

Configuration API (api/config-api.md)

配置API (api/config-api.md)

Best Practices

最佳实践

Resources

资源

Keywords

关键词

Component API (
`api/component-api.md`
)

组件API (
`api/component-api.md`
)

Props and Events (
`api/props-and-events.md`
)

属性与事件 (
`api/props-and-events.md`
)

Tools API (
`api/tools-api.md`
)

工具API (
`api/tools-api.md`
)

Configuration API (
`api/config-api.md`
)

配置API (
`api/config-api.md`
)