uniapp8-组件库uview-ui与uview-plus的使用（vue3）
1、uView的认识
使用uView有哪些好处呢
- 平台兼容性：uView UI 针对不同的 UniApp 支持的平台（如微信小程序、App 等）进行了优化和适配，可以确保在各个平台上的组件保持一致性和兼容性。
- 更新和维护：uView UI 的版本更新能及时更新最新的功能和修复 bug
我们看看uniapp官方给我们的提示：
官网的相关地址 uviewui.com/components/...
2、安装uView
（1）首先，我们需要在我们的依赖之中安装 uView UI
js
yarn add uview-ui
// 或者使用下面这个
yarn add uview-ui@2.0.36这里你如果你已经安装并且使用了这个ui组件库，这里我们可以看到，官方也给我们提供了一个监测版本的代码
版本查询
我们可以简单打印一下查看一下我们本地的版本
js
// 通过`console.log`打印的形式
console.log(uni.$u.config.v);
// 可以查阅uView的配置文件得知当前版本号，具体位置为：
/uview-ui/libs/config/config.js当然，也可以直接在我们的依赖文件夹进行查看，这边可以看到我们的依赖已经安装成功了这会！
（2）导入并注册 uView UI
接下来我们在项目的入口文件 main.js（或 main.ts）中导入 uView UI 并注册
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();（3）在我们的页面之中简单使用 uView UI 组件试试，看我们是否生效
这里我就选择了首页作为简单的尝试
3、问题处理
（1） uview显示位置处理
这里运行以后显示我们页面错误，我们查看处理一下。
这里报错：Vue.filter is not a function
这里我猜测是我写的位置不正确，我们稍微改一下然后查看一下效果！
这边我们更改了位置以后报错已经消失了，但是我们的uview好像也没有生效！
这里我们换一个卡片部分的样式进行尝试一下
这边我们可以看一下正常的应该是什么样子
然后我们放到文章之中尝试：
js
<uni-section title="自定义卡片内容" type="line">
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0" :thumbnail="avatar" >
<template v-slot:title>
<uni-list>
<uni-list-item :show-switch="true" title="自定义标题"/>
</uni-list>
</template>
<image style="width: 100%;" :src="cover"></image>
<text class="uni-body uni-mt-5">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</text>
<view slot="actions" class="card-actions">
<view class="card-actions-item" @click="actionsClick('分享')">
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">分享</text>
</view>
<view class="card-actions-item" @click="actionsClick('点赞')">
<uni-icons type="heart" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">点赞</text>
</view>
<view class="card-actions-item" @click="actionsClick('评论')">
<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">评论</text>
</view>
</view>
</uni-card>
</uni-section>这边我们可以看到并未生效
4、setConfig的方式配置uview-ui
这边我思考了一下，感觉很有可能是我的配置没有配置官方建议的setConfig的方式，这边我们进行一下更改！
js
uni.$u.setConfig({
// 修改$u.config对象的属性
config: {
// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
unit: 'rpx'
},
// 修改$u.props对象的属性
props: {
// 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
radio: {
size: 15
}
// 其他组件属性配置
// ......
}
})尝试以后：没有效果！
5、配置SCSS
查看官网可以发现，uView 依赖 SCSS，您必须要安装此插件，否则无法正常运行。
接下来我们就尝试安装一下这些依赖试试
js
yarn add sass -D
yarn add sass-loader@10.1.1 -D
yarn add @dcloudio/uni-ui6、配置uview-plus
上面的项目我们再次跑了以后发现，官方建议还是更换vue2的版本，因为vue3使用的是uview-plus(uiadmin.net/uview-plus/...%2C%25E5%2585%2589%25E6%2598%25AF%25E8%25BF%2599%25E4%25B8%25AA%25E5%2590%258D%25E5%25AD%2597%25E5%2590%25AC%25E7%259D%2580%25E5%25B0%25B1%25E5%25BE%2588%25E5%2583%258Felement-plus%25EF%25BC%258C%25E5%25A5%25BD%25EF%25BC%258C%25E9%2582%25A3%25E6%258E%25A5%25E4%25B8%258B%25E6%259D%25A5%25E6%2588%2591%25E4%25BB%25AC%25E5%25B0%25B1%25E7%25BB%25A7%25E7%25BB%25AD%25E5%2588%2587%25E6%258D%25A2%25E4%25B8%2580%25E4%25B8%258B%25EF%25BC%258C%25E8%25B8%25A9%25E8%25B8%25A9%25E8%25BF%2599%25E4%25B8%25AA%25E5%259D%2591 "https://uiadmin.net/uview-plus/),%E5%85%89%E6%98%AF%E8%BF%99%E4%B8%AA%E5%90%8D%E5%AD%97%E5%90%AC%E7%9D%80%E5%B0%B1%E5%BE%88%E5%83%8Felement-plus%EF%BC%8C%E5%A5%BD%EF%BC%8C%E9%82%A3%E6%8E%A5%E4%B8%8B%E6%9D%A5%E6%88%91%E4%BB%AC%E5%B0%B1%E7%BB%A7%E7%BB%AD%E5%88%87%E6%8D%A2%E4%B8%80%E4%B8%8B%EF%BC%8C%E8%B8%A9%E8%B8%A9%E8%BF%99%E4%B8%AA%E5%9D%91")
🎈 uview-plus官网
（1）卸载uview-ui
先把上面我们配置的部分删除了，然后把uview-ui给卸载了
js
yarn remove uview-ui（2）安装uview-plus
安装我们的uview-plus
js
yarn add uview-plus切换了以后还是之前使用方式差不多
js
// main.js，注意要在use方法之后执行
import uviewPlus, { setConfig } from 'uview-plus'
app.use(uviewPlus)这里我们先运行看看，这边可以看到我们的报错已经解决了
这边我们可以看到，没有任何的问题出现，接下来我们尝试使用一下，先随意丢个骨架屏进去看看效果
js
<template>
<up-skeleton
rows="3"
title
loading
></up-skeleton>
</template>没有效果，这里我们再配置一下相关需要的东西
js
yarn add dayjs
yarn add clipboard（3）在引入uview-plus的全局SCSS主题文件
也就是说：我们应该在项目根目录的uni.scss中引入此文件。
在项目根目录的uni.scss中引入此文件
js
/* uni.scss */
@import 'uview-plus/theme.scss'; //注意路径是否正确5、配置uni-ui easycom
再次运行项目，依旧报错，那么我们尝试配置一下 easycom
查看官网可以发现，我们需要去配置easycom
使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点：
在pages.json中配置easycom组件模式
js
{
"easycom": {
// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
"custom": {
...
}
},
// 此为本身已有的内容
"pages": [
// ......
]
}这里还是没生效，然后清理缓存，关闭项目，重新下载依赖，再次启动，ok!
再次跑一下我们项目！OK,愉快的开发吧！