开发 H5 是用 uni-app 还是 Vue 好？多年前端开发经验用这篇文章告诉你应该如何考虑

为什么会有这个疑问

能问这个问题的人，相信你已经熟悉如何用 Vue 来开发 web 应用了，是在纠结于到底是使用 Vue + VS code 来开发，还是直接使用 uni-app + HbuilderX 来开发。

编程开发体验

从编程语法来说，其实 uni-app 支持大部分的 Vue 语法，两者的开发体验非常接近，所以这不是重点考虑的点。所以我们再来看 IDE 。

VS code 开发 Vue 应用体验非常流畅，安装相关插件后，代码提示准确流畅，而且自由度强，主题可以随便换，我非常喜欢；反观 uni-app，无论我是否开发小程序 或者是 APP，只能使用 HbuilderX，因为这个官方的开发工具内置很多以效率为第一考量的功能，但用来开发 H5 反而会造成干扰，比如语法提示很多时候不够准确， 下拉选择后经常会莫名其妙地插入一堆引用。貌似这些都是为了编译到小程序或者是 APP 上的，从这个角度来说，用 Vue 会更简单纯粹。

uni-app 开发 H5 奇怪的问题

uni-app 开发 H5 时，很多 api 为了跨端，也就是官方所宣传的一套代码编译到 9 大平台，这些 api 为了抹平差异，往往做了很多的兼容，会出现很多奇怪的问题。比如使用 <input> 组件，在 uni-app 中并不是原生组件，而是经过二次封装的，运行到 H5 时，很多 input 的原生事件都无法直接监听。比如我在《uni-app 开发中，监听 input 键盘事件获取不到按下按键值怎么办？》这篇文章中就讲述了如何解决这样的问题。

我还遇到过的就是点击事件，使用 uni-app 做的 H5，点击事件绑定的方法居然拿不到点击的坐标，自己折腾了很久不知所以然，在官方的问答社区也找不到答案，一直到后面在 HbuilderX 的更新日志中才发现，这 TM 就是一个 bug ！虽然新版本修复了，但这种非常无聊的 bug ，使用 Vue 是不可能会出现的。

uni-app 最让我崩溃的，就数每次新版本更新后，老项目会报各种错误，每次更新就像一个定时炸弹一下，需要小心翼翼地去排雷，真心累。

至于组件，uni-app 的插件大多是小程序和 APP 的，纯 web 的插件组件不多，生态远没有传统 web 好。所以为了避免出现各种问题，还是建议用 Vue + VS code 吧。

什么情况下适合用 uni-app 来开发 H5？

实际工作中，我还是有不少项目选择用 uni-app ，原因有下面几个：

• uni-app 全家桶：该项目的后端采用 uniCloud，使用 uni-app 有很多内置的 api 和组件，而且使用 uniCloud 全家桶，开发调试能节省很多时间
• 从小程序编译 H5：对于那些先有小程序项目，然后再需要搞 H5 接公众号的需求，往往都可以通过简单修改，利用 uni-app 的条件编译来直接生成 H5

总结

上面就是我关于工作中如何选择 uni-app 和 Vue 的开发 H5 的原因，希望能解答这个的疑问。