一、配置colorUI

1.下载colorui文件

在github中下载：GitHub镜像/ColorUI

或 在插件市场下载：ColorUI-UniApp - DCloud 插件市场

2.解压文件夹把其中的colorui文件夹复制后放入项目根目录

3.在根目录下的App.vue中引入colorui中的css文件

<style>
	/*每个页面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";
</style>

4.在根目录下main.js中引入colorui的cu-custom 组件 

import cuCustom from 'colorui/components/cu-custom.vue'
Vue.config.productionTip = false

5.在页面中使用colorui的组件（直接复制想引入的组件代码即可使用）

<view>
    <swiper class="card-swiper" :circular="true" :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
	    <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
		    <view class="swiper-item">
		        <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
			</view>
		</swiper-item>
	</swiper>
</view>

二、配置阿里图标

1.在阿里图标库中下载需要的图标

iconfont-阿里巴巴矢量图标库

2.解压图标文件并复制其中的iconfont.css和iconfont.tff文件放入common文件夹或者static文件下新建的iconfont文件中

3.复制阿里图标库中的@font-face替换iconfont.css中并添加https:

4.在App.vue中引入图标css文件

<style>
	/*每个页面公共css */
	@import url("static/iconfont/iconfont.css");
</style>

 5.使用图标

（1）在导航栏中使用时，需要把&#xe替换为\ue

"tabBar": {
		"color": "#dbdbdb",
		"selectedColor": "#333",
		"borderStyle": "#dbdbdb",
		"height":"60px",
		"backgroundColor": "white",
		// 可以在这里配置图标文件路径也可以下面的iconPath中配置，但注意文件路径必须是绝对路径
		"iconfontSrc": "/static/iconfont/iconfont.ttf",
		"list": [{
				"iconfont": {
					"text": "\ue627",
					"selectedText": "\ue627",
					"fontSize": "24px",
					"color": "#dbdbdb",
					"selectedColor": "#ffc600"
				},
				"text": "首页",
				"pagePath": "pages/home/home"
				// 配置底部按钮图标的方式：在这里配置iconPath默认图标及selectedIconPath选中时图标；
				// "iconPath": "static/recommand.png",
				// "selectedIconPath": "static/recommand_selected.png"

			},
		]
	},

（2）在页面中使用时，查找图标对应名称，并放在页面元素的class中

<i class="iconfont icon-shoujisel"></i>
<view class="iconfont icon-shoujisel"></view>