1、新建uniapp项目 test
2、导入colorUI示例项目用hbuildx导入(点击跳转到示例项目)
3、将示例项目中的 colorui 文件夹复制到 test 项目的根目录
4、 test/App.vue 中引入 css
<style>
@import "./colorui/main.css";
@import "./colorui/icon.css";
@import './common/app.css'
</style>
完成以上步骤后,可以使用colorUI的组件了,下面以tag为例
<view class='cu-tag' class='bg-green'>测试标签</view>
浅色系
class="light"
此外,可以在挂载全局颜色
Vue.prototype.ColorList = [{
title: '嫣红',
name: 'red',
color: '#e54d42'
},
{
title: '桔橙',
name: 'orange',
color: '#f37b1d'
}
]
其他页面用的时候
data() {
return {
ColorList:this.ColorList
}
},
<view class='cu-tag radius light' :class="bg-'ColorList[2].name'">测试标签</view>