SuperAPI AI 工具集

uview-pro-vue3

前端与建站

查看项目

更新于 10-16 16:51

技能介绍

该技能用于在 uni-app 项目中使用 uView Pro 组件库构建 Vue 3 移动端界面。uView Pro 是一个包含 100 多个组件的组件库,覆盖移动端常见的界面需求。

适用场景:当需要构建 Vue 3 / uni-app 移动端界面、使用表单/数据展示/反馈/导航组件、配置 uView Pro 主题与国际化或全局设置、使用内置工具(HTTP 请求、存储、路由、校验、格式化),以及在新 uni-app 项目中集成 uView Pro 时,可使用该技能。

安装与基础用法:先执行 npm install uview-pro,然后在 main.js 中注册。资料给出的注册方式为:从 vue 导入 createSSRApp,从 uview-pro 导入 uView,创建应用后通过 app.use(uView) 使用,并返回 { app }。

主要能力:组件按类别划分。表单类包括 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。每个组件在 examples/components/ 目录下都有详细示例。

内置工具:HTTP(examples/tools/http.md,带拦截器的请求封装)、Storage(examples/tools/storage.md,本地存储工具)、Router(examples/tools/router.md,导航辅助)、Validator(examples/tools/validator.md,表单校验)。

使用方式:工作流程为安装并在 main.js 注册、按 UI 需求匹配组件、加载对应示例文件、使用内置工具。资料提供了表单校验示例:使用 u-form 配合 :model 与 :rules,在其中放置 u-form-item 与 u-input,通过 u-button 触发提交,在 script setup 中定义表单响应式对象与校验规则,调用 formRef.value.validate 并在校验通过时执行后续操作。

API 参考:api/component-api.md 提供组件属性、事件、方法与插槽;api/tools-api.md 提供工具函数签名与参数;api/config-api.md 提供全局与主题配置。

最佳实践:按需引入组件以减小打包体积;优先使用 script setup 编写 Vue 3 代码;通过 uView 主题配置而非覆盖 CSS 进行定制;复用内置 HTTP、存储与路由工具,避免引入额外依赖;在真实移动设备上验证 uni-app 表现,而非仅在 H5 上测试。

限制与未提供信息:资料未说明该技能的收费方式、价格、具体平台兼容性范围、性能数据或效果保证;这些内容暂未提供。使用前请以官方文档 https://uviewpro.cn/ 为准。