一、配置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>

總結

以上是生活随笔為你收集整理的在uniapp中配置并colorui及阿里图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。