這篇文章主要介紹了Vue3組件庫有哪些的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue3組件庫有哪些文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)專注于任縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供任縣營銷型網(wǎng)站建設(shè)，任縣網(wǎng)站制作、任縣網(wǎng)頁設(shè)計、任縣網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù)，打造任縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供任縣網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

參考了如下開源組件庫，因為有些設(shè)計是多個版本和框架的，這里只討論 Vue3 版本。

• element-plus - 經(jīng)典中的經(jīng)典，全面支持 Vue 3

• tdesign-vue-next - 鵝廠優(yōu)質(zhì) UI 組件，配套工具完滿，設(shè)計工整，文檔清晰

• arco-design-vue- 字節(jié)跳動 UI 組件庫開源，大廠邏輯，設(shè)計文檔完美

• ant-design-vue - 螞蟻前端 UI 庫，面向企業(yè)級中后臺

• naive-ui - 寶藏 Vue UI 庫，Vue UI 新星，從 Vue 3 起步

• vant - 有贊團隊開源移動 UI 組件庫，全面支持 Vue 3

• nutui - 京東出品，移動端友好，面向電商業(yè)務(wù)場景

• vuetify - 老牌 Vue UI ，基于谷歌的 Material Design 樣式開發(fā)

• varlet - Varlet 是一個基于 Vue3 開發(fā)的 Material 風(fēng)格移動端組件庫，全面擁抱 Vue3 生態(tài)，由社區(qū)建立起來的組件庫團隊進行維護。

TypeScript

流行度：100%
這個流行趨勢已經(jīng)成必然了，現(xiàn)在面試也有越來越多的 TS 相關(guān)。

rollbar 是一個異常監(jiān)控平臺，rollbar 于 2018 年統(tǒng)計了前端項目中Top10 的錯誤類型：

這里有很多錯誤都是空的或未定義的。如果使用 TypeScript 就可以簡單的避免這些錯誤。

使用 TypeScript 可以避免 80% 的相關(guān)錯誤，當(dāng)然 anyScript 不行。。

另外 TypeScript 的優(yōu)勢不止于此，比如 IDE 的智能提示，項目更容易維護等等。如果你還沒有用 過 TS，那最好現(xiàn)在開始嘗試使用。

Monorepo

流行度：55%

包括 vue、Reac、Babel 等越來越多的項目都開始使用 Monorepo

Monorepo，就是指將所有代碼放到一個代碼倉庫中的項目管理策略。

Monorepos 的優(yōu)點

• 依賴管理：共享依賴，所有的代碼都在一個倉庫。版本管理非常方便。

• 代碼復(fù)用：所有的代碼都在一個倉庫，很容易抽離出各個項目共用的業(yè)務(wù)組件或工具，并通過 TypeScript 在代碼內(nèi)引用。

• 一致性：所有代碼在一個倉庫，代碼質(zhì)量標(biāo)準(zhǔn)和統(tǒng)一風(fēng)格會更容易。

• 透明度：所有人都能看到全部代碼，跨團隊協(xié)作和貢獻更容易。

Monorepos 的缺點

• 性能：代碼越來越多，Git、IDE 之類的工具會越來越卡。

• 權(quán)限：管理文件權(quán)限會更具挑戰(zhàn)，Git 目錄并沒有內(nèi)置的權(quán)限管理系統(tǒng)，整個項目是沒辦法區(qū)分某些部門開放哪個項目，某些部門關(guān)閉的。

• 學(xué)習(xí)成本：對新人來說，項目變大了，學(xué)習(xí)成本自然會更高。

Monorepo 絕對不是銀彈，Monorepo 策略也不完美，但某些方面來說確實解決了一些項目的維護和開發(fā)體驗。

如果你的項目有多個關(guān)聯(lián)倉庫，或者還在用 submodule 方式管理多個倉庫，那可以試一試Monorepo。

包管理器

有 55% 使用 非npm，剩下 45% 看不出來使用什么包管理工具，最主要的是居然都沒有 lock 文件，這個是真沒看懂，作為開源項目不需要統(tǒng)一依賴版本的嗎？

npm v1-v2

• 初代的 npm 會導(dǎo)致重復(fù)安裝依賴，比如 A 依賴 C，B 也依賴 C，這時會安裝兩次 C。(是安裝兩次，不是下載兩次。會下載到本地緩存。)

• 因為是樹型結(jié)構(gòu)，node_modules嵌套層級過深(會導(dǎo)致文件路徑過長的問題)

• 模塊實例不能共享。比如 React 有一些內(nèi)部變量，在兩個不同包引入的 React 不是同一個模塊實例，因此無法共享內(nèi)部變量，導(dǎo)致一些不可預(yù)知的 bug。

npm v3 / yarn

從 npm3 和 yarn 開始，都來通過扁平化依賴的方式來解決上面的這個問題。

所有的依賴都被拍平到node_modules目錄下，不再有很深層次的嵌套關(guān)系。這樣在安裝新的包時，根據(jù) node require 機制，會不停往上級的node_modules當(dāng)中去找，如果找到相同版本的包就不會重新安裝，解決了大量包重復(fù)安裝的問題，而且依賴層級也不會太深。

但同時，這樣也帶來了新的問題

• 幽靈依賴 - package.json里并沒有寫入的包竟然也可以在項目中使用了。

• 分身依賴 - 比如 A 和 B 都依賴了 C，但是依賴 C 的版本不一樣，一個是 1.0.0，一個是 2.0.0。這時取決于 A 和 B 在package.json中的位置，使用的 C 有可能是 1.0.0 版本，也可能是 2.0.0 版本。

• 平鋪減少安裝沒有減省時間，因為算法的原因，時間居然還增加了。

npm v5 / yarn

該版本引入了一個lock文件，以解決node_modules安裝中的不確定因素。 這使得無論你安裝多少次，都能有一個一樣結(jié)構(gòu)的node_modules。

然而，平鋪式的算法的復(fù)雜性，幽靈依賴之類的問題還是沒有解決。

yarn v2 PnP

在 yarn 的 2.x 版本重點推出了 Plug’n’Play（PnP）零安裝模式，放棄了node_modules，更加保證依賴的可靠性，構(gòu)建速度也得到更大的提升。

yarn 2.x 擺脫 node_modules，安裝、模塊速度加載快；所有 npm 模塊都會存放在全局的緩存目錄下，避免多重依賴；嚴(yán)格模式下子依賴不會提升，也避免了幽靈依賴。

但是，自建 resolver 處理 Node require 方法，脫離Node現(xiàn)存生態(tài)，兼容性不太好。

pnpm

pnpm 具有安裝速度快、節(jié)約磁盤空間、安全性好等優(yōu)點，它的出現(xiàn)也是為了解決 npm 和yarn 存在的問題。

1、pnpm通過硬鏈接與符號鏈接結(jié)合的方式，來解決 yarn和 npm 的問題。

• 硬鏈接：硬鏈接可以理解為源文件的副本，pnpm 會在全局 store 存儲項目 node_modules 文件的硬鏈接。硬鏈接可以使得不同的項目可以從全局 store 尋找到同一個依賴，大大節(jié)省了磁盤空間。

• 軟鏈接：軟鏈接可以理解為快捷方式，pnpm在引用依賴時通過符號鏈接去找到對應(yīng)磁盤目錄（.pnpm）下的依賴地址。

比如 A 依賴 B，A 下面是沒有 node_modules的，而是一個軟鏈接。實際真正的文件位于.pnpm 中對應(yīng)的 A@1.0.0/node_modules/A目錄并硬鏈接到全局 store 中。

而 B 的依賴存在于 .pnpm/B@1.0.0/node_modules/B。
而 A 依賴的 B，用軟鏈接鏈到上面的地址，也就是 B --> ../../B@1.0.0/node_modules/B

node_modules
├── A --> .pnpm/A@1.0.0/node_modules/A
└── .pnpm
    ├── B@1.0.0
    │    └── node_modules
    │        └── B ==>  /B
    └── A@1.0.0
        └── node_modules
            ├── B --> ../../B@1.0.0/node_modules/B
            └── A ==>  /A

--> 代表軟鏈接，==》代表硬鏈接

而這種嵌套node_modules結(jié)構(gòu)的好處在于只有真正在依賴項中的包才能訪問，很好地解決了幽靈依賴的問題。此外，因為依賴始終都是存在store目錄下的硬鏈接，相同的依賴始終只會被安裝一次，多重依賴的問題也得到了解決。

2、當(dāng)然 pnpm 也存在一些局限。

• pnpm-lock.yaml 和 package-lock.json 不一致，不能兼容。

• 一些場景不兼容，比如 Electron。

• 不同應(yīng)用的依賴是硬鏈接到同一份文件，所以不能直接修改依賴文件，否則會影響其他項目。而且因為安裝結(jié)構(gòu)不同，原來的 patch-package 之類的工具也不能用了。

雖然還有種種問題，但總體來說瑕不掩瑜。

其他

ni可以理解為包管理器的管理器，ni 假設(shè)您使用鎖文件（并且您應(yīng)該），在它運行之前，它會檢測你的 yarn.lock / pnpm-lock.yaml / package-lock.json 以了解當(dāng)前的包管理器，并運行相應(yīng)的命令。

cnpmcnpm 和 npm 以及 yarn 之間最大的區(qū)別就在于生成的 node_modules 目錄結(jié)構(gòu)不同，這在某些場景下可能會引發(fā)一些問題。此外也不會生成 lock 文件。但是 cnpm 保持了 node_modules 的目錄結(jié)構(gòu)清晰，可以說是在嵌套模式和扁平模式之間找到了一個平衡。

很多面試會問 pnpm 為啥快，除了上面的store保證全局只安裝一次，還有軟連接保證不重復(fù)安裝之外。還有一個，當(dāng)安裝同一依賴的不同版本時，只有不同的部分會被重新保存。

建議不管用什么包管理工具，都要加上 lock 文件，在版本更新期間去升級依賴。以便能獲得更好的安全性。

esbuild

流行度：89%

esbuild 是一個用 go 語言寫的 javascript、typescript 打包工具，速度比 webpack 快 100 倍以上。

雖然打包工具用的各不相同，有 vite、webpack、Rollup，但最終都用到了 esbuild 打包。只有一個vuetify沒用，不過vuetify還沒有正式發(fā)布，后面也說不定會換。

未來 ESM 標(biāo)準(zhǔn)會越來越流行，所以相對應(yīng)的工具鏈也會越來越流行。

vite 嚴(yán)格來說不是打包工具，而是一個前端構(gòu)建工具，vite 實際使用 Rollup 和 esbuild 打包。

SVG Icon

流行度：55%

關(guān)于Icon Font的缺陷，可以看這篇Inline SVG vs Icon Fonts 文章。主要有以下幾方面：

• 瀏覽器將其視為文字進行抗鋸齒優(yōu)化，有時得到的效果并沒有想象中那么銳利。 尤其是在不同系統(tǒng)下對文字進行抗鋸齒的算法不同，可能會導(dǎo)致顯示效果不同。

• Icon Font 作為一種字體，Icon 顯示的大小和位置可能要受到font-size、line-height、word-spacing 等等 CSS 屬性的影響。 Icon 所在容器的 CSS 樣式可能對 Icon 的位置產(chǎn)生影響，調(diào)整起來很不方便。

• 使用上存在不便。首先，加載一個包含數(shù)百圖標(biāo)的 Icon Font，卻只使用其中幾個圖標(biāo)，非常浪費加載時間。 自己制作 Icon Font 以及把多個 Icon Font 中用到的圖標(biāo)整合成一個 Font 也非常不方便。

• 為了實現(xiàn)最大程度的瀏覽器支持，可能要提供至少四種不同類型的字體文件。包括TTF、WOFF、EOT 以及一個使用 SVG 格式定義的字體。

• 網(wǎng)絡(luò)延時會導(dǎo)致 Icon 會先加載出來一個 string。

SVG Icon 的優(yōu)勢可以用組件文檔的描述

• 完全離線化使用，不需要從 cdn 下載字體文件，圖標(biāo)不會因為網(wǎng)絡(luò)問題呈現(xiàn)方塊，也無需字體文件本地部署。

• 在低端設(shè)備上 SVG 有更好的清晰度。

• 支持多色圖標(biāo)。

• 對于內(nèi)建圖標(biāo)的更換可以提供更多 API，而不需要進行樣式覆蓋。

SVG Icon的劣勢，比如兼容性。（IE：啥？）

當(dāng)然總體來說，Icon Font 對性能的影響沒有那么大。這也可能是沒那么流行的原因？

CSS變量

流行度：75%

計算總數(shù)按 8 個計，naive-ui 我沒看懂。后面可能會修正。

雖然編寫還是使用的預(yù)處理語言，但是最后都想辦法轉(zhuǎn)成了 CSS var。就性能來說，肯定是瀏覽器支持的 W3C 規(guī)范更好。

但是目前很多預(yù)處理語言的函數(shù)之類的功能，原生還不是很好的支持。所以預(yù)處理語言還很有存在的必要的。

關(guān)于“Vue3組件庫有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue3組件庫有哪些”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。