在跨平台移动开发领域，uni-app以其“一次开发，多端发布”的特性，成为众多开发者的首选框架。而uView UI，正是uni-app生态中最为优秀的UI组件库之一。由开发者“wenju”个人发起并维护，uView UI以其简洁的设计、丰富的组件和完善的文档，迅速获得了社区的热烈响应，成为uni-app生态中不可或缺的一部分。
根据uni-app官方统计和GitHub数据，uView UI累计获得超过4.5k Star，npm周下载量稳定在数千次级别。其成功之处在于：它不仅提供了一套美观的组件，更重要的是它深刻理解了跨平台开发者的痛点——多端兼容性、开发效率和性能优化的平衡。
uView UI支持Vue 2（2.x版本）和Vue 3（uView Pro版本）两套体系。本文将重点聚焦于uView 2.x（Vue 2版本）的使用，同时会介绍uView Pro（Vue 3版本）的升级特性和迁移要点，帮助读者全面掌握这一跨平台开发利器的核心用法。
一、uView UI概述
1.1 什么是uView UI
uView UI是uni-app生态中一款优秀的、支持多平台快速开发的UI框架。它由开发者“wenju”于2020年左右开始构建，以个人项目的形式成长，凭借高质量的组件和详细的文档，迅速获得了社区的广泛认可。
uView UI的核心价值可以概括为：
跨平台兼容：一套代码，可编译运行到iOS、Android、微信小程序、H5、QQ小程序、百度小程序、支付宝小程序、头条小程序等多个平台。
组件丰富：提供了超过60个精选组件，覆盖了移动端开发的绝大部分场景。
工具齐全：内置了大量实用的JS工具函数，如时间格式化、防抖节流、数据验证等，让开发者专注于业务逻辑。
1.2 uView UI的版本体系
uView UI目前主要分为两个大的版本体系，开发者需要根据项目需求选择合适的版本：
关于版本的补充说明：
uView 2.x是基于uView 1.x的升级，优化了性能和组件API。
uView Pro是以uView 1.8.8为基线，使用TypeScript完全重构的版本，支持Vue 3组合式API。
有赞前端团队维护的vant系列与uView无关，uView是完全独立的个人开源项目。
1.3 适用场景
uView UI主要适用于以下场景：
跨平台应用开发：需要同时覆盖小程序、App、H5等多个终端的项目。
企业内部管理系统：特别是基于uni-app开发的后台应用。
快速原型开发：通过丰富的组件快速搭建产品原型。
个人开发者/小团队：uView的个人项目背景使得其决策灵活、更新及时，但也意味着企业级SLA需要团队自行把控。
二、环境搭建与安装配置
2.1 前置要求
在使用uView UI之前，请确保开发环境满足以下要求：
HBuilderX最新版（推荐）或VSCode + uni-app插件
uni-app项目已创建（Vue 2版本）
如使用Vue 3，请选择uView Pro
2.2 npm安装（推荐）
# 对于uView 2.x（Vue 2项目）
npm install uview-ui@2.0.36 --save
# 对于uView Pro（Vue 3项目）
npm install uview-pro --save
2.3 配置步骤
uView UI的配置相比其他组件库稍显复杂，主要包括以下几个关键步骤：
步骤一：引入uView主JS库
在项目根目录的main.js中，引入uView并全局注册：
// main.js
import Vue from 'vue';
import App from './App.vue';
import uView from 'uview-ui';
Vue.use(uView);
const app = new Vue({
...App
});
app.$mount();
步骤二：引入uView的全局SCSS主题文件
在App.vue中，引入uView的基础样式文件：
<!-- App.vue -->
<style lang="scss">
/* 注意：style标签需声明scss属性支持 */
@import "uview-ui/index.scss";
</style>
关键点：如果项目未安装sass依赖，需要先安装sass和sass-loader，否则样式文件无法正确解析。
步骤三：引入uView的全局SCSS变量文件
在项目根目录的uni.scss中，引入uView的全局变量文件：
/* uni.scss */
@import "uview-ui/theme.scss";
步骤四：配置easycom组件模式
在pages.json中配置easycom规则，这是实现uView组件按需引入的关键步骤：
// pages.json
{
"easycom": {
// 注意：npm安装方式不需要前面的"@/"
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
重要说明：uView的按需引入是通过easycom机制实现的，而非webpack的Tree Shaking。这意味着只要你配置了easycom规则，就可以直接在模板中使用等组件，无需手动import，且未使用的组件不会被打包。
2.4 版本信息查询
可以通过以下方式查看当前安装的uView版本：
// 通过console.log打印
console.log(uni.$u.config.v);
// 或查看配置文件
// /uview-ui/libs/config/config.js
2.5 uView Pro的额外配置（Vue 3项目）
对于使用uView Pro（Vue 3）的项目，配置步骤略有不同：
- 修改manifest.json
{ "vue": { "version": "3" } } - 创建index.html（H5端需要）
在项目根目录创建index.html文件，内容为标准HTML模板。
- main.js配置
```
// main.js
import { createSSRApp } from 'vue';
import App from './App.vue';
import uViewPro from 'uview-pro';
export function createApp() {
const app = createSSRApp(App);
app.use(uViewPro);
return { app };
}
```
来源：
http://uklgy.cn/category/ball-sports.html
