【esp32-uniapp】uniapp小程序篇02——引入组件库

一、引入组件库（可自行选择其他组件库）

接下来介绍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组件模式

温馨提示

1. uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。
2. 请确保您的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>

显示成功。配置结束