一、引入组件库（可自行选择其他组件库）
接下来介绍colorUI、uview plus的安装，其他的安装可自行查找教程
1.colorUI
weilanwl/coloruicss: 鲜亮的高饱和色彩，专注视觉的小程序组件库
下载之后解压，将\coloruicss-master\Colorui-UniApp下的colorui复制到项目的根目录、
在App.vue引入
@import "colorui/main.css";
@import "colorui/icon.css";
随便用一个，显示成功。
2.uview plus
因为我创的项目是vue3的，所以安装的是uview plus（不兼容vue2）。如果是vue2的项目，对应的是uview.
官方安装教程：安装 | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架
接下来是Hbuider X方式的安装步骤
（1）下载插件
点击下面的连接去下载插件
零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。 - DCloud 插件市场
点击完之后，需要扫码看广告，跟着看一下就好。
看完之后会有一个弹窗询问是否要打开Hbuider，选择 打开。
然后选择你要导入的项目。
完成之后会发现目录多了一个这个文件夹
（2）引入uview-plus主JS库
在项目根目录中的main.js中，引入并使用uview-plus的JS库。
代码：
import uviewPlus from '@/uni_modules/uview-plus'
app.use(uviewPlus)（3）引入uview-plus的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
注意！
请注意uni-app官方规范中uni.scss是一个特殊文件，万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中，否则会造成打包后包超大。
/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';
（4） 引入uview-plus基础样式
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性。
<style lang="scss">
/* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-plus/index.scss";
</style>
（5）安装依赖库
npm i dayjs
npm i clipboard（6）配置easycom组件模式
温馨提示
- uni-app为了调试性能的原因，修改
easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。- 请确保您的
pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
"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"
}
},
二、测试
在index.vue页面随便引用一些组件-->运行
<template>
<view style="padding: 40px;">
<up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button>
</view>
</template>
<script setup>
import { ref } from 'vue';
const disabled = ref(true);
</script>
<style>
</style>
显示成功。配置结束