Uview Pro Vue3

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

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:

1. 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/

2. 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

3. 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

4. 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

5. 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

1. Understanding 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

2. Installation

Using npm:

npm install uview-pro

Using yarn:

yarn add uview-pro

Using pnpm:

pnpm add uview-pro

3. Basic Setup

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