vue3 的技术选型

• 背景
• vue 2 和 vue 3
  • 有关 vue2 停止维护的应对
  • 有关现阶段的市场洞察
  • 公司现状分析
• 后续的动作
  • HUI VUE 3 ？
  • 脚手架 vessel
• 总结
• one more thing

背景

在 2023 年中，有些同事使用了 vue3 作为技术选型，并使用在项目中，并产生了一些负面的影响。统一软件技术委员会这边有统一要对 vue2 vue3 要做一部分的技术选型牵引工作，以及如何来应对 vue2 官方不再维护的事情。

首先先说下结论：

• 现阶段还是默认推荐 vue2 来开发项目，而且这个阶段可能未来还会持续 2~3 年。如果选型有用到 vue3 的，需要同步到web前端技术委员会，并说明下理由。
• 后续会考虑 vue3 加入到默认的技术选型中，这个时间预计是明年年底的时候，具体得看公司生态的发展情况。
• hui vue 3 版本已经开始做了

科普下统一软件技术委员会，主要是制定一些技术规范，技术选型，技术牵引等等；其中 web前端技术委员会成员

vue 2 和 vue 3

有关 vue2 停止维护的应对

vue 官方发布了 停止维护的通知：Vue 2 的长期技术支持 (LTS)、终止支持 (EOL) 及其延长版服务

但这块其实并不用太担心，大概有以下的考量：

• VUE2 本身经过10年的迭代比较稳定了，虽然官方不维护，但实际上的现代浏览器的安全问题本身因为VUE2 导致的会比较少。
• VUE2 本身就是开源，而且本身在全球以及国内有大量的使用者，一旦出现安全问题，社区会同步出相关的解决方案。

但毕竟官方已经不维护了，对于浏览器更新比较快的今天，对于新功能的迭代就不太会有好的解决方案了。

有关现阶段的市场洞察

1. VUE2 和 VUE3 下载量，过去7天全球npm包下载量： 这里统计的是版本超过10w+下载量，VUE2: 113.8W次；VUE3: 83.3W次；虽然VUE3是社区中的主流，但总体使用情况缺没有明显的优势。数据来源：https://www.npmjs.com/package/vue?activeTab=versions

2. 一些公司的招聘要求：从招聘岗位上看并没有对 VUE3 进行强制要求会，简历上只是说会VUE。一些人数小于500人以下的招聘岗位会有明确要求会VUE3 （数据来源BOSS直聘）

3. 一些公司的VUE 使用情况：大华使用的是VUE2.6.14版本（最新是2.7.14）

从以上数据看，在现在阶段 vue 2 和 vue 3 处于一个平衡的状态。

统计时间 2023年9月某日

公司现状分析

1. 绝大部分都在使用VUE2：在统一软件架构后现在公司产品以及内部工具前端技术框架都是用VUE2框架，统一软件技术架构的默认推荐也是使用 VUE2版本；部分组件使用了VUE3 的语法：去年开始，默认脚手架2年前已经改成了composition-api （VUE3的语法可以在VUE2.7中使用）

2. HUI 暂时没有 VUE3的版本：现在HUI 暂时没有 VUE3的版本，即使控件升级，也要考虑到控件可能存在的破坏性改动。

3. 其他升级的代价：除了控件库以外，VUE3相对VUE2还是有少量的破坏性改动，会有一定的升级成本。现在如果要把老组件迁移到VUE3，即使控件库支持，还是有一些代码改动。

4. 由于我们是统一软件架构基于iframe来做组件间的隔离，VUE3和VUE2的组件共存在产品上并不会存在太大的问题（样式统一即可）；但不包含一些用小部件技术的组件。

对于已经迭代的产品，不要切换成VUE3；如果存在对性能有要求的产品，也需要谨慎考虑，并同步到技术委员会web前端组

后续的动作

切换成 vue 3 主要一块是控件库，也就是 HUI-VUE 的支持；还有一块就是脚手架，典型页面，多语言，多皮肤等内容的；

HUI VUE 3 ？

先暂时叫这个名字，具体名字我还没想好

这块我做了一些技术选型（包含 web components 以及 headless ui），和 web前端技术委员会的同事，商量决定还是由现有的 HUI-VUE 库进行改造；

商量的过程是通过，自由提案，以及最终投票的结果敲定的，中间花了非常多的时间做技术选型，以及优劣势的分析，具体可以看下这个

2023 HUI 控件库技术选型

团队与开发

由于 HUI-VUE 2 最早也是各自部门最早引入同事并开发的，而且代码是完全开源的。

这样做的好处是，这样的控件库更加适合于海康，而不是仅适用于一小个部门；能够更多的集思广益，以及更多的人参与进来，更好的维护。

HUI VUE 3 的挑战

其实要做的事情非常多，但所带来的收益并不多。

因为，和之前不同的是之前是由于没有控件库，当时要在 ISC 1.0 中完全覆盖。这次并没有说有那个产品需要完全集成 HUI-VUE 3，所以这次的针对性和可验证性并不一定会这么强。那么做出来的价值也并不一定会立刻体现出来。

为了更好的兼容性，我们必须将屎山雕刻成金山，并保留其可升级性，这是一个非常大的挑战。

希望得到的帮助

有兴趣的同事可以参与进来，一起来做这件事情，这样的话，可以更快的完成，也可以更好的维护。参与的方式可以读下这个文献：如何给 HUI 贡献

脚手架 vessel

我个人觉得尤雨溪在 vite 的贡献其实比 vue 也要大。从 vite 的 npm 周下载量是 vue 的一倍就可以看出来。而 vue-cli 不维护，后续确实也要改到 vite 上，这块的话，优先级在 HUI-VUE 3 之后。

但如果想了解的话可以看下这2篇文献：2023 个人最佳实践（vite章节） 以及 vue3 基础模板项目

多皮肤

多皮肤的方案，之前主要还是sass转css的那种比较研发态的换肤，后续可能考虑会用 css 变量来做，这个内容和 vue 3 无关，但和之前的浏览器选型相关。

多语言

多语言方案改动估计不会太大，但后续可能会从外层或者门户获取，不会从接口获取；不过这个内容也和 vue 3 无关，和门户以及产品结构相关。

总结

以上是我们对 vue3 的一些技术选型，以及后续动作。后续我会不定期的更新一些成果物。

也会有人来问，大概什么时候公司可以用 vue3，以及兼容性会怎么样。

时间这边我不能保证，但我已经定了一个大概的时间，最慢就是明年年底前吧。

兼容性的话，除了 vue3 本身的兼容性以外，那么 hui 的兼容性我也是尽可能保证，但肯定还是会有破坏性改动的。以及脚手架肯定不能再用 vue-cli。

现在 hui-vue 属于开发阶段，内部安排了一些开发人员，如果还有想参与的可以联系我下。

如果越快想 vue3 落地，可能需要更多有能力投入基建的同事到这里来，避免内卷加强公司整体实力。

仓库地址：内网链接无法访问

one more thing

现在维护的版本有点多，hui < 2.50， > 2.50.x， vue 3 版本，老版本的新功能可能更新会不那么及时