一、uview-plus官网地址，有详细介绍，感兴趣的可以深入了解学习

介绍 | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架uview-plus，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水http://uview-plus.jiangruyi.com/components/intro.html

二、Hbuilder X 方式安装下载引入uview-plus

1、进入该网址，点击  下载插件并导入Hbuilder X 

（注意：需要登录账号才可以下载，第一次使用需要按步骤注册账号）

2、勾选上自己的项目，就会开始下载，直到提示下载成功

 三、scss/sass插件下载与安装

官网介绍

下载安装方式配置 | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架uview-plus，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水http://uview-plus.jiangruyi.com/components/downloadSetting.html

1、由HBuilder X创建的项目，已经安装scss插件【有了直接跳过②】

如图所示：第三行scss/sass编译

---

2、如果没有，请按图的步骤一步一步来安装，顶部菜单----->工具---->插件安装----->安装新插件----->前往插件市场安装（会跳转到dcloud插件市场）----->文字搜索：scss/sass编译---->点击进详情----->点击  下载插件并导入Hbuilder X ---->右下角会有下载弹窗----->下载完成之后重启软件

再进行：顶部菜单----->工具---->插件安装，就会看到已经安装好的scss/sass编译

四、配置文件

1、引入uview-plus主JS库

// main.js
import uviewPlus from '@/uni_modules/uview-plus'

 app.use(uviewPlus)

 2、在uni.scss中引入uview-plus的全局SCSS

 请注意uni.scss是一个特殊文件，万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中

// 引入uview-plus的全局SCSS
@import '@/uni_modules/uview-plus/theme.scss';

3、引入uview-plus基础样式

<style lang="scss">
	/* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-plus/index.scss";
</style>

 4、manifest.json中增加mergeVirtualHostAttributes配置

	"mergeVirtualHostAttributes" : true

5、再pages.json中添加代码来配置easycom组件模式

        官网说明：uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。

"easycom": {
		"autoscan": true,
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
	    "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
		}
	},

五、安装依赖库 dayjs和cliphoard

（如果最后还没有效果，可以重新安装这两个依赖）

npm i dayjs

npm i clipboard

这个位置打开内置终端，然后在执行以上的两条命令 

⑥ 

六、在pages/inde/index.vue页面中，测试并使用uview-plus的组件：加载中按钮组件

 官网组件介绍，自己想试试其他的也可以

Button 按钮 | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架uview-plus，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水http://uview-plus.jiangruyi.com/components/button.html

 

1、在index.vue中测试使用按钮组件

<template>
	<view>
		<up-button type="primary" text="确定"></up-button>
		<up-button type="primary" :plain="true" text="镂空"></up-button>
		<up-button type="primary" :plain="true" :hairline="true" text="细边"></up-button>
		<up-button type="primary" :disabled="disabled" text="禁用"></up-button>
		<up-button type="primary" loading loadingText="加载中"></up-button>
		<up-button type="primary" icon="map" text="图标按钮"></up-button>
		<up-button type="primary" shape="circle" text="按钮形状"></up-button>
		<up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button>
		<up-button type="primary" size="small" text="大小尺寸"></up-button>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const disabled = ref(true);
</script>

<style lang="scss">
	/* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-plus/index.scss";
</style>

2、运行并预览效果