uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台
uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。uni-ui不包括基础组件，它是基础组件的补充。
我在使用uni-ui的组件时，碰到了文档bug的坑，折腾了好久。以popup为例，记录来一下。
uniapp的官网会把组件地址指向这里https://ext.dcloud.net.cn/plugin?id=329。 但这个文档有问题。
以github为准：https://github.com/dcloudio/uni-ui。但github也会跳转回那个网站，死循环。我记录一下正确过程。
安装
npm install @dcloudio/uni-ui --save
import
文档写的import uniPopup from "@/components/uni-popup/uni-popup.vue" 是错的
看github有个引用的列表
image.png
在这里找到相应的路径
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup'
简便写法，但是会引入更多东西：
import {uniPopup} from '@dcloudio/uni-ui'
可以配置Tree shaking，在打包的时候消除无用代码(dead code)的方式
配置Tree Shaking来减少JavaScript的打包体积
使用
通过ref来调用弹框显示、隐藏 this.$refs.popupHi.open()
<button @click="openHi">打开弹窗</button>
<uni-popup ref="popupHi" type="bottom">底部弹出 Popup</uni-popup>
methods:{
openHi(){
this.$refs.popupHi.open()
}
}
文档上显示的效果是弹框有白色背景，实际是没有的默认的，要自己写。
这个是一个居中弹框，居中显示是type="center"，再在<uni-popup>里填充了icon和文字，在写下popup-box的样式：
image.png
<uni-popup class="finish-popup" ref="finish" type="center">
<view class="popup-box">
<uni-icons type="checkmarkempty" size="60"></uni-icons>
<view class="txt">恭喜完成阅读</view>
</view>
</uni-popup>
.popup-box {
text-align: center;
background-color: #fff;
padding: 30rpx;
border-radius: 10rpx;
font-size: 28rpx;
}
默认是点击随意一处后关闭弹框。可以用定时器来自动关闭：
openHi(){
setTimeout(() => {
this.$refs.finish.close()
}, 2000)
this.$refs.popupHi.open()
}
.
