Naive UI：一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，快有点意思。-Toy模板网

这篇具有很好参考价值的文章主要介绍了Naive UI：一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，快有点意思。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在当今的前端开发领域，Vue 3已成为中后台应用的首选框架。为了满足开发者的需求，各种组件库如雨后春笋般涌现。其中，Naive UI以其独特的优势，成为了Vue 3开发者的得力助手。本文将深入探讨Naive UI的特性、优势以及如何使用它来提高开发效率。

vue3 navi ui,typescript,ui,vue.js,css3,前端框架,前端,native

一、Naive UI的特性

组件丰富：Naive UI提供了超过80个组件，覆盖了表格、表单、弹窗、图表等多个方面。这些组件不仅功能强大，而且高度可定制化，满足了各种业务需求。
主题可调：Naive UI提供了一个先进的类型安全主题系统。通过简单的样式覆盖，开发者可以轻松定制应用的主题，实现品牌统一和个性化定制。无需使用less、sass、css变量或webpack的loaders，简化了主题定制的过程。
使用TypeScript编写：Naive UI是第一个全量使用TypeScript编写的Vue 3组件库。TypeScript的静态类型检查和面向对象编程能力，使得开发者可以更好地编写高质量的代码，减少错误，提高开发效率。与您的TypeScript项目无缝衔接，无需导入任何CSS，让组件工作更顺利。
高效的开发体验：Naive UI的每个组件都是独立的模块，支持代码拆分和Tree Shaking。这有助于减少最终打包的文件体积，提高应用程序的性能。同时，通过使用Naive UI的组件，开发者可以快速构建应用，减少重复的代码编写工作。

二、如何使用Naive UI

要开始使用Naive UI，首先需要将其安装到您的Vue 3项目中。您可以使用npm或yarn进行安装。在项目根目录下打开终端，输入以下命令：

安装

注意，naive-ui 仅支持 Vue3。如果你在使用 Vue2，可以去看看别的库。

npm

使用 npm 安装。

npm i -D naive-ui

UMD

参考使用 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 中的字体，包含常规字体和等宽字体。

只需要在你 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 直接生效是一个设计上的妥协，在下个大的版本默认的全局 reset 样式将不再带有字体相关的样式，而是全部置于 n-global-style 组件中。

支持的平台

浏览器

不支持 IE 浏览器。

Edge、Firefox、Chrome、Safari 等现代浏览器的最新的 2 个版本确保会被支持。

对于这些浏览器的其他版本中，由于开发资源的限制并没有做过严格的测试。但是我们预期 naive-ui 应该在这些浏览器不算太老的版本上能正常的运行（比如 2 年之内的版本）。如果你发现了任何问题欢迎来提 issue。

Vue

只支持 Vue 3（>3.0.5）。

TypeScript

需要版本 > 4.1。

通过以上步骤，您就可以开始使用Naive UI提供的丰富组件来构建您的Vue 3应用了。无论是表格、表单还是弹窗、图表，Naive UI都为您提供了强大的支持和灵活的定制选项。

三、总结与展望
Naive UI作为Vue 3的强大TypeScript组件库，为开发者提供了丰富的组件、可调主题以及高效的开发体验。通过使用Naive UI，开发者可以快速构建高质量的中后台应用，减少代码量并提高开发效率。随着Vue 3和TypeScript的普及，我们相信Naive UI将会成为越来越多开发者的首选组件库。未来，我们期待Naive UI继续保持其领先地位，为开发者带来更多创新和便利的功能。

附组件官方文档地址：

https://www.naiveui.com/zh-CN/os-theme

欢迎关注我的微信技术公众号：前端组件开发

vue3 navi ui,typescript,ui,vue.js,css3,前端框架,前端,native