1.3　Vue+Element組合開(kāi)發(fā)的優(yōu)勢(shì)

Vue本身是一個(gè)輕量級(jí)的框架，由于其學(xué)習(xí)成本低、容易上手的特性受到了很多開(kāi)發(fā)者的青睞，Vue在企業(yè)級(jí)管理后臺(tái)項(xiàng)目中是最容易入門的一個(gè)框架，因此社區(qū)貢獻(xiàn)出了非常多它的周邊產(chǎn)品，例如為它而生的各種UI框架、Starter Kit等，為整個(gè)前端開(kāi)發(fā)領(lǐng)域帶來(lái)了方便。而在眾多桌面端UI框架中，為什么要選擇Element？使用Vue 3，為什么要搭配Element Plus？

第一，在知名度上，只要是Vue開(kāi)發(fā)者，一定知道Element UI。相比于支持成熟穩(wěn)定版本Vue 2.x的國(guó)內(nèi)非常流行的UI框架Ant Design Vue、ViewUI（原來(lái)的iView）、Vuetify、Quasar，Element是大眾所熟悉的。截至2021年年底，在支持Vue的UI框架中，Element在GitHub上擁有最多的星數(shù)，活躍度也相對(duì)較高，如圖1.2所示。

圖1.2中，筆者按照GitHub星數(shù)由多到少的順序?qū)⑦@幾個(gè)框架排序，其中框選出來(lái)的Element和Element Plus、iView和ViewUI可以看作一個(gè)框架，Quasar和Ant Design Vue支持Vue 2、Vue 3的版本在同一個(gè)倉(cāng)庫(kù)。可以看到Element擁有最多星數(shù)，受到最多的人喜歡，從右側(cè)的Past year of activity框架在過(guò)去一年時(shí)間的活躍性可以看出，Element Plus近一年的活躍度也相對(duì)較高。因?yàn)槭蹺lement的影響，在Vue 3發(fā)布后，作為官方出品的Element Plus未正式發(fā)布之前呼聲就很高，發(fā)布之后也倍受關(guān)注。

另外，筆者之所以列舉這些UI框架，除了筆者熟知、周邊被端開(kāi)發(fā)者大量使用外，還因?yàn)樵诠P者編寫此書時(shí)，它們?nèi)曰钴S于國(guó)內(nèi)各大招聘網(wǎng)站的前端開(kāi)發(fā)需求上，例如Quasar，如圖1.3所示。

第二，表現(xiàn)在支持Vue的程度上，隨著Vue 2的成熟，Element UI也趨向穩(wěn)定。相比第一點(diǎn)中提到的幾個(gè)流行的UI框架，Element、Ant Design Vue、Quasar都率先完成了對(duì)Vue 3的支持，而Vuetify和ViewUI（或iView）目前仍未發(fā)布支持Vue 3的版本，所以雖然從圖1.2來(lái)看，Vuetify的星數(shù)次于Element，ViewUI（或iView）的星數(shù)也不差，但若隨大眾喜好，現(xiàn)階段學(xué)習(xí)Vue 3將直接舍棄它們。

第三，從學(xué)習(xí)Vue 3的角度來(lái)看，Element Plus是最適合用于學(xué)習(xí)Vue 3的框架，在官方尚未發(fā)布Element Plus之前，社區(qū)便出現(xiàn)了為教學(xué)正確使用Vue 3而生的Element 3，便是復(fù)制了Element UI的源碼，使用Vue 3進(jìn)行重構(gòu)，甚至在Element Plus發(fā)布之后，其Table組件源碼還是照搬Element Plus的源碼，并在其Readme文檔做了說(shuō)明，如圖1.4所示，目前，其Table組件也在重構(gòu)了。

而Ant Design最開(kāi)始是為React框架設(shè)計(jì)的UI框架，所以Ant Design Vue的寫法也更偏向于React，更習(xí)慣于使用JSX語(yǔ)法（有興趣深入學(xué)習(xí)Ant Design Vue組件源碼的讀者可自行了解更多）。而Element Plus是為Vue 3而生的，完全采用TypeScript和Vue 3的組合式API對(duì)Element進(jìn)行重構(gòu)，所以從學(xué)習(xí)Vue 3這個(gè)角度來(lái)看，Element Plus仍然非常值得推薦。

第四，從維護(hù)角度來(lái)看，支持Vue 3的框架Ant Design Vue是由作者唐金州維護(hù)的，同樣Quasar也是由其作者Razvan Stoenescu維護(hù)的，而Element Plus則由官方團(tuán)隊(duì)維護(hù)。

第五，從設(shè)計(jì)角度來(lái)看，Element更符合國(guó)人審美，Ant Design Vue和Quasar都是Material設(shè)計(jì)風(fēng)格。

最后，從閱讀角度來(lái)看，Quasar用戶需要有一定的英文閱讀能力，因?yàn)樗木S護(hù)和貢獻(xiàn)者都在國(guó)外。而對(duì)于本土UI框架來(lái)說(shuō)，Element和Ant Design Vue對(duì)于中文開(kāi)發(fā)者來(lái)說(shuō)就相對(duì)友好了。

還有更多的理由可以說(shuō)明Vue搭配Element絕對(duì)是一個(gè)不錯(cuò)的選擇，也許有讀者更青睞Element之外的UI框架，或因?yàn)槠浣M件更多，或因?yàn)槠浣M件功能更豐富，又或者更喜歡它的設(shè)計(jì)風(fēng)格，但只從入門學(xué)習(xí)來(lái)看，Element絕對(duì)更值得推薦，因?yàn)槠渥銐蚝?jiǎn)單，容易上手，學(xué)習(xí)了Element之后，對(duì)于其他框架的應(yīng)用也會(huì)觸類旁通，非常容易入手。