uni-app 学习踩坑之uni-ui

uni-app 学习之路

加油

---

---

前言

搞定好项目框架和运行后，我就开始写静态页面，因为我比较菜，只能写页面的第一件事就是先引入ui 框架，官网推荐的uni-ui号称是最匹配uni-app的前端框架，我被他们的宣传文章唬的一愣一愣的，年少轻狂的我相信了，然后就开始找文档去~

https://uniapp.dcloud.io/component/README?id=uniui
直通uni-ui

点击看到uni-ui介绍，然后直接点击他那些ui组件，会跳转到https://ext.dcloud.net.cn/

好吧，感觉没个像样的官网，如果不是uni官方推荐的，我还以为这是一个什么三流库呢。你看人家element-ui ant.design搞得多正规规，官网一看就像是个大公司的。

算了，接着用吧。
听从

一、uni-ui

按照文档所说，我用的hBuilderx 所以直接通过插件库安装，安装后，文档说不用import 也不用注册组件，直接把vue那套组件写法省了，这挺好的。

但是也不知道我是没看对地方还是不会用，我下载完我不会用，element-ui那套写法在这咋感觉对不上呢。
然后就开始疯狂摸索。

最后搞懂了（大概吧，我昨天下午开始搞的嘎嘎嘎嘎）

2.我做的大概功能就是点击按钮，出来一个模态框，上面有一个input和button

3.具体用法不解释了，只说一点。

修改uni-ui默认样式

这个真的气死人，我以为写法也会和element-ui 一样，定义一个样式名，然后

<style lang="scss">
//element-ui 如果你想修改默认样式就这样改，不写scoped,只要保证样式名唯一就不会冲突
.样式名{
   //.....element写法
}
</style>

//但是uni-ui不行，不管你加权重，还是用/deep/都不行,我是写的微信小程序，最后摸索出来的写法是，将你的样式写在app.vue里，对只能写在这才能生效，只要不写在这，不管你怎么加权重都不会覆盖默认样式。

//所以我最后的做法是，给我那个组件单独建立一个scss文件，专门写这个组件默认样式，为了防止污染，给组件起个唯一样式名。最后用@import 方法引到app.vue 里面。

//我不知道这个方法是否使用其他小程序或者app、h5 这些。