欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uniapp如何引入colorUI

程序员文章站 2024-01-16 11:44:40
...

color UI 使用文档

https://www.kancloud.cn/m22543/colorui/1289227

Uni-app中引入第三方ColorUI

1.去colorui官网下载colorui压缩包

官方网址:https://www.color-ui.com
uniapp如何引入colorUI

2.解压压缩包,将colorui文件夹放到自己的项目中

uniapp如何引入colorUIuniapp如何引入colorUI

3.在main.js中引入cu-custom组件
import cuCustom from 'colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

uniapp如何引入colorUI

4.在app.vue中引入css
@import "colorui/main.css";
@import "colorui/icon.css";

uniapp如何引入colorUI

5.引入colorUI的样式写法,看能否成功展示,成功展示表示成功引入
<view class="padding flex flex-direction">
		  <button class="cu-btn bg-grey lg">玄灰</button>
		  <button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
</view>

uniapp如何引入colorUI
效果展示:
uniapp如何引入colorUI

相关标签: uni-app 小程序