uniapp使用ui库

前言：UI库在项目开发中相信是必不可少的一个工具把，那么在uniapp里面，肯定要放弃pc端的UI。例如element.ui ，在uniapp上不会做到很好的适配。所以，到底哪个UI库更适合用到uniapp上呢？

相信大家跟我一样，都去百度上搜哪个UI库更适合用到uniapp上面吧，我也是在百度上搜了看了不少。vant.ui我是自己试了一遍，完全没有效果。

所以我选择了官方提供的uni.ui，好马配好鞍。

官网地址uni-app官网 (dcloud.net.cn)

1.如果你创建项目的时候，用的是uni-ui模块，则可以忽略此步

如果你使用的是默认模板，那我们就需要下载uni-ui的UI库了

地址：uni-ui - DCloud 插件市场

2.下载好之后，我们就去项目的根目录查看。是否多了一个uni-modules。若存在。就是下载成功，若没有重新下载

3.UI库下载好了。那我们怎么引入并且使用呢？ 在VUE里面我们都记得是在main.js里面按照引入。那么在uniapp里面，只需要下载，就可以了。无需注册以及引入等代码

地址：uni-ui - DCloud 插件市场

4.下载完成之后。系统会自动监测你的HBuilder X有没有sess，若没有系统会自动为你下载

一切准备就绪。那我们就试试最终效果 

在pages页面的template标签里面输入

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

 

 看看最终效果把：