uview-vue2

适用场景

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

• 使用 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 实用工具和辅助函数

如何使用此技能

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

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

   • 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

2. 从 examples/ 目录加载相应的示例文件：

   Getting Started（快速开始）- examples/getting-started/：

   • examples/getting-started/installation.md - 安装 uView UI 和基本设置
   • examples/getting-started/basic-usage.md - 组件基本用法
   • examples/getting-started/design-principles.md - 设计原则和最佳实践

   Components（组件）- 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 组件

   Tools（工具）- 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 - Debounce 工具
   • examples/tools/throttle.md - Throttle 工具

   Advanced（高级）- examples/advanced/：

   • examples/advanced/theme-customization.md - 自定义 uView UI 主题
   • examples/advanced/uniapp-integration.md - UniApp 集成

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 - 组件用法模板

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

指南：

• 参见 examples/guide/ 或 examples/getting-started/ 中的指南文件 → https://www.uviewui.com/guide/demo.html

组件：

• 参见 examples/components/ 中的组件文件 → https://www.uviewui.com/components/intro.html

示例和模板

此技能包含详细示例，按官方文档结构整理。所有示例都位于 examples/ 目录中（参见上方映射）。

使用示例：

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

使用模板：

• 参照 templates/ 目录中的模板，搭建常见项目结构
• 根据具体需求和编码风格调整模板

API 参考

详细的 API 文档位于 api/ 目录中，其结构与官方 uView UI API 文档一致：

组件 API（api/components.md）

• 所有组件属性和 API
• 组件事件和插槽
• 组件类型和接口

工具 API（api/tools.md）

• $u 对象方法
• Toast、Http、Storage、Route 工具
• 实用函数

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

• SCSS 变量
• 主题自定义变量
• 颜色变量

使用 API 参考：

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

最佳实践

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. UniApp 兼容性：在多个平台（H5、小程序、App）上进行测试
7. 响应式设计：使用 rpx 单位构建响应式布局
8. 组件组合：组合组件以构建复杂的 UI
9. 性能：优化 uni-app 性能
10. 无障碍访问：遵循 uni-app 无障碍访问指南

资源

• 官方网站：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

关键词

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