简介

uView Pro Plus 是一个基于 uni-app 的 Vue3 + TypeScript 多平台 UI 框架，提供 120+ 高质量组件，覆盖移动端常用场景，支持 H5、微信、支付宝、QQ、头条、App、鸿蒙等多个平台。

本项目基于 uview-plus 进行深度重构和增强，主要改进包括：

• 全面迁移至 TypeScript + <script setup> 语法
• 删除 $u God Object，改为 tree-shakeable 的工具函数直接导入
• 新增 useDefaults 系统（基于 Proxy + vnode.props）
• 重构 useParent/useChildren 为 provide/inject 模式
• 拆分 ConfigProvider 为 ThemeProvider + LocaleProvider + DefaultsProvider
• 新增 CSS 变量命名规范（--u-color-primary 新规范 + 旧别名兼容）
• 新增多个高质量业务组件（u-coupon, u-goods-sku, u-virtual-list 等）

核心特性

• 120+ 组件，覆盖移动端常用场景
• TypeScript 原生，完整类型推导
• Composition API（<script setup>）编写
• 暗色模式 + 运行时主题切换
• useDefaults 全局默认值覆盖
• 多语言国际化（vue-i18n）
• 支持多平台（H5 / 微信 / 支付宝 / QQ / 头条 / App / 鸿蒙）
• Tree-shaking 友好，按需引入

安装

方式一：npm 安装

npm install uview-pro-plus
# 或
pnpm add uview-pro-plus

方式二：uni_modules 安装

从 DCloud 插件市场 下载，将 uview-pro-plus 目录放入项目的 src/uni_modules/ 下。

使用方式

1. 引入样式

在 uni.scss 中引入主题变量：

@import 'uview-pro-plus/theme.scss';

在 App.vue 引入基础样式：

<style lang="scss">
@import 'uview-pro-plus/index.scss';
</style>

如果使用 uni_modules 方式安装，路径改为 @/uni_modules/uview-pro-plus/theme.scss

2. 配置 easycom

在 pages.json 中配置自动引入：

{
    "easycom": {
        "autoscan": true,
        "custom": {
            "^u-(.*)": "uview-pro-plus/components/u-$1/u-$1.vue"
        }
    }
}

如果使用 uni_modules 方式安装，路径改为 @/uni_modules/uview-pro-plus/components/u-$1/u-$1.vue

3. 使用组件

配置完成后，无需手动 import，直接在模板中使用：

<template>
    <u-button type="primary" text="按钮" />
</template>

致谢

本项目站在以下优秀开源项目的肩膀上：

• uview-plus — Vue3 版 uView 组件库
• uView UI — 原始 uView 组件库

感谢这些项目的作者和贡献者们。

文档与链接

• GitHub

许可证

MIT

Copyright (c) 2025-present fzmdev (uView Pro Plus) Copyright (c) 2022-2024 uview-plus.jiangruyi.com (uview-plus)