【重点突破】—— quasar 与 uniapp 选型简单对比

文章来自不饿不饿不饿的掘金博客

---

对于这两个框架我都分别用来写过不大不小的项目, 所以对比还算客观, 因为我是推荐用 quasar 的, 所以我先从一定不会选 quasar 的场景开始

不选 quasar 的场景

• 有开发小程序需求
• 对于只想一套代码就能有不错的原生 app, 这里提一句, 对于 app 的生成, quasar 是用 Cordova 做的套壳 app, 本质还是网页, 而 uniapp 是用 weex 生成的原生控件
• 对 quasar 的 UI 组件风格不满意

下面开始讲我认为选 quasar 的理由

一整套设计规范

quasar 提供一整套设计规范, 字体大小, 元素间距离, 颜色选择, 边框阴影, 都有丰富的选择和对应的工具 class, 将开发人员从盲目调整 css 参数中解放出来, 适用于没有设计师的团队, 用 quasar 很少需要写 css, 在设计规范中找到合适的 class 加上去就好了

而 uniapp 在这方面是 0, 当然也有人为 uniapp 开发组件库, 说实话真的有点差

非侵入式开发规范

quasar 提供了一个 quasar-cli, 给 quasar app 提供一整套开发规范, 从页面生成到部署, 都可以使用,也可以不使用, 这也是它的优点, quasar 一直的理念就是围绕 vue 和 web 开发规范来构建工具链,很少增加额外的东西

丰富的 UI 组件

组件极其丰富, 和令人发指的参数, 提供很完善的自定义, 举个简单例子, quasar 的 input 组件, 有 45 个 props, 9 个 slot, 当然再丰富也有覆盖不到的需求, 这是很正常的

开箱即用的工具函数和vue指令

在开发期间我们经常会把一些常用的操作抽象成工具函数和vue指令, 而 quasar 提供了很多拿来就用的工具函数和vue指令, 大大提升了开发效率, 简单举几个例子:

1. 日期转换
2. 格式化字符串
3. dom 属性的获取
4. 复制到剪切板
5. 函数的防抖与节流
6. DOM 事件的更好封装,比如 监听 rightClick 事件

完全拥抱 web 开发

quasar 对 vue和css 的使用没有限制, quasar 只是围绕 vue 搭了一套基于 web 的工具链, uniapp 出于自己的考虑限制了很多东西, 最明显的一点就是不能使用 vue router 作为页面导航和我认为不怎么好用的动画的写法

良好的文档

我认真读过 quasar 和 uniapp 的文档, uniapp 的文档真的一言难尽, quasar 文档的缺点就是全英文和字有点多了(笑

quasar 的缺点

1. quasar 的缺点也是因为它的优点, 即不够灵活, 但是灵活不灵活这个东西实在是太玄学了, 而在对比了 quasar 的优点之后, 我认为这是能接受的, 毕竟开发效率和开发体验的提升, 我认为是能让人忽略它不够灵活的缺点的
2. 因为规范多而使上手难度增加, 这个问题是客观存在的, 但是这要看跟谁比, 跟 uniapp 比的话, 还是要好一点的, 毕竟 quasar 的规范大多是非侵入性的, 而 uniapp 从开发方式, 甚至 IDE 的使用都有很强的侵入性

总结

简单来说, quasar 是阅读量大, 代码写的少, uniapp 是阅读量不小, 代码写的更多.