uview-pro-vue3

何时使用此技能

在用户想要进行以下操作时使用此技能：

• 使用 uView Pro 组件构建 Vue 3 / uni-app 移动端界面
• 使用表单、数据展示、反馈或导航组件
• 配置 uView Pro 主题、国际化或全局设置
• 使用内置工具（HTTP 请求、存储、路由、验证、格式化）
• 在新的 uni-app 项目中设置 uView Pro

如何使用此技能

工作流

1. 安装 - 执行 npm install uview-pro 并在 main.js 中注册
2. 选择组件 - 根据界面需求从下方参考内容中选择组件
3. 加载示例文件 - 每个组件在 examples/components/ 中都有详细示例
4. 使用工具 - 使用 examples/tools/ 中的内置工具

快速入门：安装和基本用法

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

示例：带验证的表单

<template>
  <u-form :model="form" :rules="rules" ref="formRef">
    <u-form-item label="Username" prop="name">
      <u-input v-model="form.name" placeholder="Enter username" />
    </u-form-item>
    <u-form-item label="Email" prop="email">
      <u-input v-model="form.email" placeholder="Enter email" />
    </u-form-item>
    <u-button type="primary" @click="submit">Submit</u-button>
  </u-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formRef = ref(null)
const form = reactive({ name: '', email: '' })
const rules = {
  name: [{ required: true, message: 'Name is required' }],
  email: [{ required: true, message: 'Email is required' }, { type: 'email', message: 'Invalid email' }]
}

const submit = () => {
  formRef.value.validate(valid => {
    if (valid) uni.showToast({ title: 'Success!' })
  })
}
</script>

组件分类

分类	组件	示例文件
表单	Button、Input、Form、Select、Switch、Checkbox、Radio、Upload	examples/components/form.md
展示	List、Card、Avatar、Badge、Tag、Empty	examples/components/list.md
反馈	Toast、Modal、Loading、Popup、Drawer	examples/components/modal.md
导航	Tabs、NavBar、Pagination、Dropdown	examples/components/tabs.md

工具参考

工具	文件	用途
HTTP	examples/tools/http.md	带拦截器的请求封装
Storage	examples/tools/storage.md	本地存储工具
Router	examples/tools/router.md	导航辅助工具
Validator	examples/tools/validator.md	表单验证

API 参考

• api/component-api.md - 组件属性、事件、方法和插槽
• api/tools-api.md - 工具函数签名和参数
• api/config-api.md - 全局和主题配置

最佳实践

1. 按需导入 - 仅导入使用到的组件，以减小包体积
2. 组合式 API - 优先使用 <script setup>，让 Vue 3 代码更简洁
3. 主题变量 - 通过 uView 主题配置进行自定义，而不是覆盖 CSS
4. 使用内置工具 - 使用 HTTP、存储和路由工具，而不是添加额外依赖
5. 在设备上测试 - 在实际移动设备上验证 uni-app 行为，而不只是测试 H5

资源

• 官方文档：https://uviewpro.cn/

关键词

uView Pro、uview-pro、Vue 3、uni-app、组件库、组件库、Button、Form、List、Modal、Tabs、NavBar、移动端 UI、表单、列表