夜雨聆风在uni-app开发中，UI组件库的选择直接影响开发效率和项目质量。如果你正在使用Vue3技术栈，那么uView Plus绝对是值得重点关注的选择。本文将从零开始，手把手教你如何在uni-app项目中集成uView Plus，并分享一些实战中踩过的坑和解决方案。
2 什么是uView Plus？
uView Plus是基于uView 2.x移植的支持Vue3的uni-app生态UI框架。它全面兼容nvue、鸿蒙以及uni-app-x（即将发布），提供120+精选组件，覆盖了移动端开发中绝大部分场景。
相比uView 1.x和2.x，uView Plus最大的亮点是对Vue3的完整支持，同时保持了与uView 2.x的接口兼容性，最大限度降低学习和迁移成本。
目前uView Plus已推出免费可视化设计功能，可以方便地进行页面可视化设计并导出源码，让设计稿即代码。
3 为什么选择uView Plus？
| 特性 | 说明 |
|---|---|
| 多端兼容 | 兼容安卓、iOS、微信小程序、H5、QQ小程序、百度小程序、支付宝小程序、头条小程序等 |
| Vue3支持 | 基于uView 2.x移植，完整支持Vue3组合式API |
| 组件丰富 | 120+精选组件，功能覆盖移动端开发主流场景 |
| 按需引入 | 通过easycom规则自动按需引入，无需手动import |
| 开源免费 | 遵循MIT开源协议，无需支付任何费用 |
4 环境准备
先创建一个uni-app项目。打开HBuilderX新建->项目。
点击创建即可。
点开左下角的终端。参考下面的文档链接进行配置。我们采用npm方式配置。
第一步：根目录又没有package.json文件的话，先执行下面的命令。
npm init -y第二步：安装sass插件。
# 安装sassnpm i sass@1.63.2 -D# 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错npm i sass-loader@10.4.1 -D
第三步：安装uview-plus
# 安装npm install uview-plusnpm install dayjsnpm install clipboard
环境准备完毕。
5 配置步骤
第一步：在main.js中，引入并使用uview-plus的js库。
# main.jsimport uviewPlus from 'uview-plus'app.use(uviewPlus)
第二步：在uni.scss中引入uview-plus的全局scss主题文件。
/* uni.scss */@import 'uview-plus/theme.scss';
第三步：在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
<stylelang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-plus/index.scss";</style>
第四步：配置easycom组件模式
uview-plus3.x配置
// pages.json{"easycom": {"autoscan": true,// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"}},// 此为本身已有的内容"pages": [// ......]}
第五步：在pages/index/index.vue中写个button按钮验证。
<up-button type="primary" shape="circle" text="按钮形状"></up-button>
第六步：效果验证
【温馨提示】