uview-plus

uview-plus — uni-app 全面兼容 nvue 的跨端 UI 组件库#

资源概述#

uview-plus 是基于 uView 2.0 的社区维护分支，为 uni-app 提供全面兼容 nvue 的 UI 组件库。原 uView 2.0 项目已停止维护，uview-plus 接过了 uni-app Vue2/Vue3 生态 UI 库的接力棒，持续修复 Bug、适配新平台并新增组件。

GitHub Stars: 711 · Forks: 209 · 语言: JavaScript · 许可证: MIT

核心特性#

✅ 60+ 精选组件：涵盖基础组件、表单、布局、导航、数据展示、媒体等完整分类
✅ 全面兼容 nvue：App 端原生渲染，性能优异
✅ 全端覆盖：微信/支付宝/百度/抖音/QQ 小程序 + H5 + App（iOS/Android）
✅ easycom 自动导入：配置后无需手动 import，直接使用 <up-*> 组件
✅ 丰富工具函数：HTTP 请求封装、路由跳转、数据格式化、节流防抖等
✅ 页面模板：内置常用页面与布局，快速搭建应用骨架
✅ 按需引入：支持 tree-shaking，精简打包体积

与原 uView 2.0 的关系#

维度	uView 2.0（原版）	uview-plus（fork）
维护状态	❌ 已停更	✅ 活跃维护
Vue 3	部分支持	完整支持
nvue 兼容	部分	全面兼容
npm 版本	2.0.x（停在 2.0.39）	3.8.86（286 版本，持续迭代）
鸿蒙 Next	❌	✅ 适配中

设计规范#

组件分类#

分类	代表组件	说明
基础	Button、Icon、Image、Link	页面基础元素
表单	Input、Textarea、Select、Picker、Upload、Form	完整表单方案
布局	Row、Col、Grid、Cell、Card	栅格 + 弹性布局
导航	Tabs、Navbar、Tabbar、Dropdown	多级导航
数据展示	Table、List、Tag、Badge、Skeleton	数据可视化
反馈	Toast、Modal、Loading、ActionSheet	交互反馈
媒体	Swiper、Image、Video、Cropper	多媒体组件
工具	http、route、format、test	JS 工具函数

主题系统#

uview-plus 通过 SCSS 变量驱动主题，在 uni.scss 中覆盖即可：

code

// 覆盖主色
$u-primary: #2979ff;
$u-primary-light: #a0cfff;
$u-primary-dark: #2b85e4;
$u-primary-disabled: #9db7ff;

审核规范#

uview-plus 编译产物为标准小程序代码，不涉及特殊权限申请。组件中的网络请求、上传等功能仍受各平台域名白名单限制。

开发指南#

快速上手#

code

# 方式1: npm 安装
npm install uview-plus

# 方式2: DCloud 插件市场导入
# https://ext.dcloud.net.cn/plugin?name=uview-plus

easycom 配置#

code

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

引入全局样式#

code

// main.js
import uviewPlus from 'uview-plus'
app.use(uviewPlus)

code

// App.vue 或 uni.scss
@import 'uview-plus/index.scss';

基础用法#

code

<template>
  <view class="container">
    <!-- 直接使用 up-* 组件，无需 import -->
    <up-button type="primary" @click="handleClick">按钮</up-button>
    <up-input v-model="value" placeholder="请输入" />
    <up-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    handleClick() {
      this.$refs.uToast.show({ message: '点击成功' })
    }
  }
}
</script>

HTTP 请求封装#

code

// 使用 uview-plus 的 http 工具
import { http } from 'uview-plus'

// 全局配置
http.setConfig({
  baseUrl: 'https://api.example.com',
  header: { 'Content-Type': 'application/json' }
})

// 请求拦截器
http.interceptors.request.use((config) => {
  config.header.token = uni.getStorageSync('token')
  return config
})

// 发起请求
http.get('/user/info').then(res => {
  console.log(res)
})

常见陷阱#

easycom 前缀：uview-plus 组件前缀为 up-（如 <up-button>），与原 uView 的 u- 前缀不同，混用时需注意
nvue 页面限制：nvue 不支持部分 CSS 特性（如 box-shadow），部分组件在 nvue 下样式表现可能不同
Vue 2/3 差异：Vue 3 下 app.use(uviewPlus) 注册，Vue 2 下 Vue.use(uviewPlus)
uni.scss 引入顺序：必须在 uview-plus/index.scss 之前覆盖变量，否则自定义主题不生效
按需引入：easycom 已实现自动按需引入，但 JS 工具函数（http、route 等）需要手动 import

生态资源#

配套框架#

uni-app：uview-plus 的唯一宿主框架
uniCloud：与 DCloud 云开发深度兼容
uni-ui：DCloud 官方组件库，可与 uview-plus 共存（注意组件前缀冲突）

替代方案对比#

组件库	Vue3	组件数	nvue	维护状态	特色
uview-plus	✅	60+	✅ 全面	活跃	uView 2.0 正统继承者
wot-design-uni	✅	80+	❌	活跃	现代设计，暗黑模式
nutui-uniapp	✅	80+	❌	活跃	京东风格
uni-ui	✅	40+	✅	活跃	DCloud 官方
Vant Weapp	❌	65+	❌	活跃	微信原生，非 uni-app

社区#

官方文档：https://uview-plus.jiangruyi.com/
备用文档：https://uiadmin.net/uview-plus/
GitHub 仓库：https://github.com/ijry/uview-plus
DCloud 插件市场：https://ext.dcloud.net.cn/plugin?name=uview-plus
更新日志：https://uview-plus.jiangruyi.com/components/changelog.html

版本更新#

最后代码推送：2026-07-27（高度活跃，几乎每日更新）
npm 版本数：286 个版本（自 2022 年持续高频迭代）
当前主要版本：3.8.86
近期方向：
- 鸿蒙 Next 平台适配
- Vue 3 Composition API 完善支持
- 新增组件与 Bug 修复
- TypeScript 类型定义持续完善
维护状态：非常活跃，作者每日提交，快速响应社区反馈

特性

详细文档

uview-plus — uni-app 全面兼容 nvue 的跨端 UI 组件库#

资源概述#

核心特性#

与原 uView 2.0 的关系#

设计规范#

组件分类#

主题系统#

审核规范#

开发指南#

快速上手#

easycom 配置#

引入全局样式#

基础用法#

HTTP 请求封装#

常见陷阱#

生态资源#

配套框架#

替代方案对比#

社区#

版本更新#

支持平台