1.3　Vue+Element组合开发的优势

Vue本身是一个轻量级的框架，由于其学习成本低、容易上手的特性受到了很多开发者的青睐，Vue在企业级管理后台项目中是最容易入门的一个框架，因此社区贡献出了非常多它的周边产品，例如为它而生的各种UI框架、Starter Kit等，为整个前端开发领域带来了方便。而在众多桌面端UI框架中，为什么要选择Element？使用Vue 3，为什么要搭配Element Plus？

第一，在知名度上，只要是Vue开发者，一定知道Element UI。相比于支持成熟稳定版本Vue 2.x的国内非常流行的UI框架Ant Design Vue、ViewUI（原来的iView）、Vuetify、Quasar，Element是大众所熟悉的。截至2021年年底，在支持Vue的UI框架中，Element在GitHub上拥有最多的星数，活跃度也相对较高，如图1.2所示。

图1.2　支持Vue的主流UI框架GitHub对比

图1.2中，笔者按照GitHub星数由多到少的顺序将这几个框架排序，其中框选出来的Element和Element Plus、iView和ViewUI可以看作一个框架，Quasar和Ant Design Vue支持Vue 2、Vue 3的版本在同一个仓库。可以看到Element拥有最多星数，受到最多的人喜欢，从右侧的Past year of activity框架在过去一年时间的活跃性可以看出，Element Plus近一年的活跃度也相对较高。因为受Element的影响，在Vue 3发布后，作为官方出品的Element Plus未正式发布之前呼声就很高，发布之后也倍受关注。

另外，笔者之所以列举这些UI框架，除了笔者熟知、周边被端开发者大量使用外，还因为在笔者编写此书时，它们仍活跃于国内各大招聘网站的前端开发需求上，例如Quasar，如图1.3所示。

图1.3　在Boss直聘上Vue+Quasar前端工程师的招聘信息

第二，表现在支持Vue的程度上，随着Vue 2的成熟，Element UI也趋向稳定。相比第一点中提到的几个流行的UI框架，Element、Ant Design Vue、Quasar都率先完成了对Vue 3的支持，而Vuetify和ViewUI（或iView）目前仍未发布支持Vue 3的版本，所以虽然从图1.2来看，Vuetify的星数次于Element，ViewUI（或iView）的星数也不差，但若随大众喜好，现阶段学习Vue 3将直接舍弃它们。

第三，从学习Vue 3的角度来看，Element Plus是最适合用于学习Vue 3的框架，在官方尚未发布Element Plus之前，社区便出现了为教学正确使用Vue 3而生的Element 3，便是复制了Element UI的源码，使用Vue 3进行重构，甚至在Element Plus发布之后，其Table组件源码还是照搬Element Plus的源码，并在其Readme文档做了说明，如图1.4所示，目前，其Table组件也在重构了。

图1.4　Element 3早期文档Table组件说明

而Ant Design最开始是为React框架设计的UI框架，所以Ant Design Vue的写法也更偏向于React，更习惯于使用JSX语法（有兴趣深入学习Ant Design Vue组件源码的读者可自行了解更多）。而Element Plus是为Vue 3而生的，完全采用TypeScript和Vue 3的组合式API对Element进行重构，所以从学习Vue 3这个角度来看，Element Plus仍然非常值得推荐。

第四，从维护角度来看，支持Vue 3的框架Ant Design Vue是由作者唐金州维护的，同样Quasar也是由其作者Razvan Stoenescu维护的，而Element Plus则由官方团队维护。

第五，从设计角度来看，Element更符合国人审美，Ant Design Vue和Quasar都是Material设计风格。

最后，从阅读角度来看，Quasar用户需要有一定的英文阅读能力，因为它的维护和贡献者都在国外。而对于本土UI框架来说，Element和Ant Design Vue对于中文开发者来说就相对友好了。

还有更多的理由可以说明Vue搭配Element绝对是一个不错的选择，也许有读者更青睐Element之外的UI框架，或因为其组件更多，或因为其组件功能更丰富，又或者更喜欢它的设计风格，但只从入门学习来看，Element绝对更值得推荐，因为其足够简单，容易上手，学习了Element之后，对于其他框架的应用也会触类旁通，非常容易入手。