大家好,歡迎來到程式視點!我是小二哥!
今天給大家推薦一個完全使用 TypeScript 編寫的 Vue 3 元件庫:Naive UI
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/96be62ad3f7b99f59c5766c06ab2ef0dcb0b7ea2f7bf45a8ec60b7f25b9f3274.png)
Vue 作者尤雨溪官方推薦。不可小覷!
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/0b0dce902b4cf9797cd93eaac4b7c55269c0eeb0aa67489ca6ad2307aa011187.png)
Naive UI 是一款基於當前比較新的 Vue 3.0/TypeScript 技術棧開發的前端 UI 元件庫。
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/a1fb62677ba4a462484c829455c8e517c26d3b0438c685e9a10f5501d3958ac0.png)
作者來自圖森未來公司,一開始內部維護並使用兩年,現已在 Github 社群開源了。
Naive UI 的特點
元件豐富完整,超過80+常用業務元件,支援按需引入。
主題可調,官方提供主題編輯器,自定義功能強。
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/874d765679aabd9ad250e8f80e301ebe74752b924e27e88531014c1bcca35de8.png)
不用繁瑣的 less、sass、css 變數,也不用 webpack 的 loaders,使用由 TypeScript 構建的先進的型別安全主題系統。
全量使用 TypeScript 編寫,和 TypeScript 專案無縫銜接。
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/90db4af21e7e2bc1474c347bc3127b96874c80fd8c9b1790bbab1215e17205ec.png)
你也可以選擇使用JavasScript哦。
執行快,小巧輕量,專門針對樣式最佳化,所有元件都可以 treeshaking,不需要匯入任何 CSS 就能讓元件正常工作.
開發上手體驗
使用 npm 安裝。
npm i -D naive-ui
注意,naive-ui 僅支援 Vue3。如果你在使用 Vue2,可以去看看別的庫。
就這樣就🆗啦!接著就可以參照官網說明使用了。
官網文件非常親民!有創意且充滿幽默。
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/31a3d4d8f477434f9cdbb73a8363bc5ecb6a5fba39f2af12f63dd10f57604749.png)
開發文件作者的內心世界確實很豐富。再來幾個元件的文件截圖給各位感受一下:
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/6af2406e1e122f31f4bd873c69f133105027a1e877ba4feb56424dc6d58f1baf.png)
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/95275464dd6c915a259566ce73d70868193bd6ae1a50df307c8e0cfc65c891a2.png)
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/094da55efcb382c8d26ab4a69b68a1ad9aae2a1b45099d8a5ddd845d9151eb9b.png)
![尤雨溪都在推薦的Naive UI,Vue元件庫的新選擇,好用到爆!](https://i.iter01.com/images/b66835a9bf631d4bc7299f70163a023736c50691fffc5972ab9d7df4be1552f4.png)
文件內容簡易懂,十分有趣。
元件的寫法很多借鑑了阿里的 Ant Design。會用Ant Design,就會用Naive UI。
建議
TypeScript是JS發展的趨勢。
學習 Vue 3 和 TypeScript,Naive UI 無疑是一個很好的選擇。元件基本都是tsx,專案也用到了vite來作為構建工具。
順便一提一下...
Naive UI地址 https://www.naiveui.com/
祝大家搬磚愉快!
寫在最後
【程式視點】助力打工人減負,從來不是說說而已!
後續小二哥會繼續詳細分享更多實用的工具和功能。持續關注,這樣就不會錯過之後的精彩內容啦!
如果這篇文章對你有幫助的話,別忘了【點贊】【分享】支援下哦~