在當今的前端開發(fā)領域，Vue 3已成為中后臺應用的首選框架。為了滿足開發(fā)者的需求，各種組件庫如雨后春筍般涌現。其中，Naive UI以其獨特的優(yōu)勢，成為了Vue 3開發(fā)者的得力助手。本文將深入探討Naive UI的特性、優(yōu)勢以及如何使用它來提高開發(fā)效率。
一、Naive UI的特性
-
組件豐富：Naive UI提供了超過80個組件，覆蓋了表格、表單、彈窗、圖表等多個方面。這些組件不僅功能強大，而且高度可定制化，滿足了各種業(yè)務需求。
-
主題可調：Naive UI提供了一個先進的類型安全主題系統(tǒng)。通過簡單的樣式覆蓋，開發(fā)者可以輕松定制應用的主題，實現品牌統(tǒng)一和個性化定制。無需使用less、sass、css變量或webpack的loaders，簡化了主題定制的過程。
-
使用TypeScript編寫：Naive UI是第一個全量使用TypeScript編寫的Vue 3組件庫。TypeScript的靜態(tài)類型檢查和面向對象編程能力，使得開發(fā)者可以更好地編寫高質量的代碼，減少錯誤，提高開發(fā)效率。與您的TypeScript項目無縫銜接，無需導入任何CSS，讓組件工作更順利。
-
高效的開發(fā)體驗：Naive UI的每個組件都是獨立的模塊，支持代碼拆分和Tree Shaking。這有助于減少最終打包的文件體積，提高應用程序的性能。同時，通過使用Naive UI的組件，開發(fā)者可以快速構建應用，減少重復的代碼編寫工作。
二、如何使用Naive UI
要開始使用Naive UI，首先需要將其安裝到您的Vue 3項目中。您可以使用npm或yarn進行安裝。在項目根目錄下打開終端，輸入以下命令：
安裝
注意，naive-ui 僅支持 Vue3。如果你在使用 Vue2，可以去看看別的庫。
npm
使用 npm 安裝。
npm i -D naive-uiUMD
參考 使用 UMD。
字體
npm i -D vfonts圖標
naive-ui 建議使用 xicons 作為圖標庫。
如果你想使用單文件組件風格（SFC - Single File Component），可以選擇直接引入或全局安裝在 Vue App 中。
直接引入（推薦）
你可以直接導入組件并使用它。這種情況下，只有導入的組件才會被打包。
如果你想知道如何按需引入主題和語言包，請參考按需引入。
<template>
<n-button>naive-ui</n-button>
</template>
<script>
import { defineComponent } from 'vue'
import { NButton } from 'naive-ui'
export default defineComponent({
components: {
NButton
}
})
</script>如果你可以使用 setup script，你可以用下面的方式使用組件。
<template>
<n-button>naive-ui</n-button>
</template>
<script setup>
import { NButton } from 'naive-ui'
</script>全局安裝（不推薦）
安裝全部組件
失去 tree-shaking 的能力，打包有冗余代碼。
如果你想全局安裝但是不想安裝全部組件，請參考按需引入。
import { createApp } from 'vue'
import naive from 'naive-ui'
const app = createApp(App)
app.use(naive)安裝后，你可以這樣在 SFC 中使用全部組件。
<template>
<n-button>naive-ui</n-button>
</template>Volar 支持（2.24.2）
如果你在使用 Volar，那么可以在 tsconfig.json 中配置 compilerOptions.types 來指定全局組件類型。
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["naive-ui/volar"]
}
}配置字體
Naive UI 可以和 vfonts 配合，你可以簡單的引入 vfonts 中的字體，包含常規(guī)字體和等寬字體。
只需要在你 App 的入口文件導入字體，即可調整 Naive UI 的字體。
// 你 App 的入口 js 文件
// ...
// 通用字體
import 'vfonts/Lato.css'
// 等寬字體
import 'vfonts/FiraCode.css'
const app = createApp()
app.use(naive)
// ...注意：不同 vfonts 字體提供的字重不同，在使用 Lato、OpenSans 的時候你需要全局調整 naive-ui 的字重配置。
<!-- 調整 naive-ui 的字重配置 -->
<n-config-provider :theme-overrides="{ common: { fontWeightStrong: '600' } }">
<app />
</n-config-provider>通過定制主題修改全局字體
如果你不打算使用 vfonts 并且想要通過主題調整修改其為別的字體，你需要使用 n-global-style 來做到這一點。在不使用 n-global-style 的情況下組件不會響應 theme-overrides 中的字體變更。
題外話：不使用 n-global-style 就能讓 vfonts 直接生效是一個設計上的妥協(xié)，在下個大的版本默認的全局 reset 樣式將不再帶有字體相關的樣式，而是全部置于 n-global-style 組件中。
支持的平臺
瀏覽器
不支持 IE 瀏覽器。
Edge、Firefox、Chrome、Safari 等現代瀏覽器的最新的 2 個版本確保會被支持。
對于這些瀏覽器的其他版本中，由于開發(fā)資源的限制并沒有做過嚴格的測試。但是我們預期 naive-ui 應該在這些瀏覽器不算太老的版本上能正常的運行（比如 2 年之內的版本）。如果你發(fā)現了任何問題歡迎來提 issue。
Vue
只支持 Vue 3（>3.0.5）。
TypeScript
需要版本 > 4.1。
通過以上步驟，您就可以開始使用Naive UI提供的豐富組件來構建您的Vue 3應用了。無論是表格、表單還是彈窗、圖表，Naive UI都為您提供了強大的支持和靈活的定制選項。
三、總結與展望
Naive UI作為Vue 3的強大TypeScript組件庫，為開發(fā)者提供了豐富的組件、可調主題以及高效的開發(fā)體驗。通過使用Naive UI，開發(fā)者可以快速構建高質量的中后臺應用，減少代碼量并提高開發(fā)效率。隨著Vue 3和TypeScript的普及，我們相信Naive UI將會成為越來越多開發(fā)者的首選組件庫。未來，我們期待Naive UI繼續(xù)保持其領先地位，為開發(fā)者帶來更多創(chuàng)新和便利的功能。
附組件官方文檔地址：
https://www.naiveui.com/zh-CN/os-theme
歡迎關注我的微信技術公眾號： 前端組件開發(fā)
歡迎加入“前端組件開發(fā)學習”交流群，一起學習成長！可關注? “前端組件開發(fā)” 公眾號后，私信后申請入群。文章來源：http://www.zghlxwxcb.cn/news/detail-855597.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-855597.html
到了這里，關于Naive UI：一個 Vue 3 組件庫，比較完整，主題可調，使用 TypeScript，快有點意思。的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
