uview-pro-vue3

何时使用此技能

在用户希望执行以下操作时使用此技能：

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

如何使用此技能

此技能的组织结构与 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 时：

1. 根据用户请求确定主题：

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

2. 从 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 - Flex 布局
   • examples/layout/container.md - 容器布局

3. 遵循该示例文件中的具体说明，了解语法、结构和最佳实践

   重要说明：

   • uView Pro 适用于 Vue 3 和 uni-app
   • 组件使用 Vue 3 Composition API
   • 示例同时包含 Options API 和 Composition API
   • 每个示例文件都包含核心概念、代码示例和要点

4. 按需参考 api/ 目录中的 API 文档：

   • api/component-api.md - 组件 API 参考
   • api/props-and-events.md - Props 和事件参考
   • api/tools-api.md - 工具 API 参考
   • api/config-api.md - 配置 API

5. 使用 templates/ 目录中的模板：

   • templates/installation.md - 安装模板
   • templates/component-usage.md - 组件用法模板
   • templates/project-setup.md - 项目配置模板

1. 了解 uView Pro

uView Pro 是一个专为 uni-app 开发设计的 Vue 3 组件库，提供丰富的组件和工具方法。

核心概念：

• Vue 3 支持：基于 Vue 3 和 Composition API 构建
• uni-app 支持：针对 uni-app 开发进行优化
• 丰富的组件：提供 100 多个组件，适用于各种使用场景
• 主题自定义：支持自定义主题
• i18n：支持国际化
• 工具：提供丰富的工具方法

2. 安装

使用 npm：

npm install uview-pro

使用 yarn：

yarn add uview-pro

使用 pnpm：

pnpm add uview-pro

3. 基本设置

// 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
  }
}

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

指南（指南）：

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

组件（组件）：

• 查看 examples/components/ 中的组件文件 → https://uviewpro.cn/zh/components/intro.html

示例和模板

本技能包含详细示例，其组织方式与官方文档结构一致。所有示例都位于 examples/ 目录中（参见上方映射）。

使用示例：

• 根据用户请求确定主题
• 从上方映射中加载相应的示例文件
• 遵循该文件中的说明、语法和最佳实践
• 根据具体使用场景调整代码示例

使用模板：

• 在 templates/ 目录中查找常见脚手架的模板
• 根据具体需求和编码风格调整模板

API 参考

详细的 API 文档位于 api/ 目录中，组织方式与官方 uView Pro API 文档结构一致：

组件 API（api/component-api.md）

• 组件属性和事件
• 组件方法
• 组件插槽

属性和事件（api/props-and-events.md）

• 常用属性
• 常用事件
• 事件处理

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

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

配置 API（api/config-api.md）

• 全局配置选项
• 主题配置
• i18n 配置

使用 API 参考：

1. 确定需要帮助的 API
2. 从 api/ 目录加载相应的 API 文件
3. 查找 API 签名、参数、返回类型和示例
4. 参考链接中的示例文件，了解详细用法
5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

1. 按需导入：仅导入需要的组件，以减小打包体积
2. 使用 Composition API：优先使用 Composition API，以便更好地组织代码
3. 正确处理事件：为组件交互使用适当的事件处理程序
4. 自定义主题：使用主题变量进行自定义
5. 遵循设计规范：遵循 uView Pro 设计规范
6. 使用工具：利用 uView Pro 工具处理常见操作
7. 使用布局：使用布局模板，保持页面结构一致

资源

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