Naive UI——一个 Vue 3 组件库(Naive UI的安装和使用)

已于 2024-01-02 16:13:16 修改
阅读量8.7k 收藏 29
点赞数 33
文章标签： ui vue.js 前端
于 2024-01-02 16:07:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peachban/article/details/135342566
版权

一.NaiveUI 一个VUE3组件库

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

二.安装 

1.npm

        使用npm 安装。

npm i -D naive-ui

2.字体

npm i -D vfonts

        (1) 配置字体

        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>

3.图标

        naive-ui 建议使用 xicons 作为图标库。

<template>
  <n-icon size="40">
    <game-controller-outline />
  </n-icon>
  <n-icon size="40" color="#0e7a0d">
    <game-controller />
  </n-icon>
  <n-icon size="40" :component="GameController" />
</template>

<script lang="ts">
import { GameControllerOutline, GameController } from '@vicons/ionicons5'
import { defineComponent } from 'vue'

export default defineComponent({
  components: {
    GameController,
    GameControllerOutline
  },
  setup () {
    return {
      GameController
    }
  }
})
</script>

三.按需引入

Naive UI 支持 tree shaking，组件、语言、主题均可 tree-shaking。

默认情况组件主题为亮色，语言为英文，无需额外导入。

1.手动引入

<script>
  import { defineComponent } from 'vue'
  import { NConfigProvider, NInput, NDatePicker, NSpace } from 'naive-ui'
  // theme
  import { createTheme, inputDark, datePickerDark } from 'naive-ui'
  // locale & dateLocale
  import { zhCN, dateZhCN } from 'naive-ui'

  export default defineComponent({
    components: {
      NConfigProvider,
      NInput,
      NDatePicker,
      NSpace
    },
    setup() {
      return {
        darkTheme: createTheme([inputDark, datePickerDark]),
        zhCN,
        dateZhCN
      }
    }
  })
</script>

<template>
  <n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN">
    <n-space vertical>
      <n-input />
      <n-date-picker />
    </n-space>
  </n-config-provider>
</template>

<style>
  body {
    background: black;
  }
</style>

2.自动引入

可以使用 unplugin-auto-import 插件来自动导入 API。

如果使用模板方式进行开发，可以使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar'
          ]
        }
      ]
    }),
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ]
})

3.按需全局安装组件（手动）

import { createApp } from 'vue'
import {
  // create naive ui
  create,
  // component
  NButton
} from 'naive-ui'

const naive = create({
  components: [NButton]
})

const app = createApp()
app.use(naive)

安装后，你可以这样在 SFC 中使用你安装的组件。

<template>
  <n-button>naive-ui</n-button>
</template>

四.调整主题

Naive UI 通过使用 n-config-provider 调整主题。

默认情况下所有组件均为亮色主题，无需任何配置。

 1.使用暗色主题

将 n-config-provider 的 theme 设为从 naive-ui 导入的 darkTheme 来设定暗色主题。

若 theme 为 undefined 则不会影响内部组件的主题。

<template>
  <n-config-provider :theme="darkTheme">
    <app />
  </n-config-provider>
</template>

<script>
  import { defineComponent } from 'vue'
  import { darkTheme } from 'naive-ui'

  export default defineComponent({
    setup() {
      return {
        darkTheme
      }
    }
  })
</script>

2.调整主题变量

你不需要写任何 CSS（Scss、Less...）。

配置的全局主题变量会对后代组件生效的主题变量覆盖。

通过设定 n-config-provider 的 theme-overrides 来调整主题变量。naive-ui 导出了 GlobalThemeOverrides 类型帮助你定义主题。

具体可使用变量请参考 GlobalThemeOverrides 类型提示。

如果想要查看更多的主题变量，可在 Naive UI 主页的右下角的 edit 按钮查看。

可以修改对应的主题变量，导出后可以拿到 themeOverrides 对象。

<script>
  import { NConfigProvider } from 'naive-ui'

  /**
   * js 文件下使用这个做类型提示
   * @type import('naive-ui').GlobalThemeOverrides
   */
  const themeOverrides = {
    common: {
      primaryColor: '#FF0000'
    },
    Button: {
      textColor: '#FF0000'
    },
    Select: {
      peers: {
        InternalSelection: {
          textColor: '#FF0000'
        }
      }
    }
    // ...
  }

  // ...
</script>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <my-app />
  </n-config-provider>
</template>

<template>
  <n-input
     v-model:value="formInline.password"
     type="password"
     @keyup.enter="handleSubmit"
     maxlength="16"
     show-password-on="click"
     :placeholder="$t('global.form_password')"
     :theme-overrides="InputThemeOverrides">
   </n-input>
  <n-checkbox v-model:checked="autoLogin" :theme-overrides="CheckboxThemeOverrides">复选框</n-checkbox>
   <n-button
     type="primary"
     @click="handleSubmit"
     size="large"
     :loading="loading"
     block
     class="button-text"
     :theme-overrides="buttonThemeOverrides">按钮</n-button>
</template>


<script lang='ts' setup>
    import { InputProps, CheckboxProps, ButtonProps } from 'naive-ui'

    type InputThemeOverrides = NonNullable<InputProps['themeOverrides']>
    type CheckboxThemeOverrides = NonNullable<CheckboxProps['themeOverrides']>
    type ButtonThemeOverrides = NonNullable<ButtonProps['themeOverrides']>

    const InputThemeOverrides: InputThemeOverrides = {
      textColor: 'rgb(51, 54, 57)',
      color: 'rgba(255, 255, 255, 1)',
      colorFocus: 'rgba(255, 255, 255, 1)',
      iconColor: 'rgba(194, 194, 194, 1)'
    }

    const CheckboxThemeOverrides: CheckboxThemeOverrides = {
      checkMarkColor: '#FFF'
    }
    const buttonThemeOverrides: ButtonThemeOverrides = {
      textColorPrimary: 'rgba(255, 255, 255, 1)',
      textColorHoverPrimary: 'rgba(255, 255, 255, 1)'
    }
</script>

3.TS 下使用主题变量

如果你正在使用 ts 写代码，这块比较适合你。

<script lang="ts">
  import { NConfigProvider, GlobalThemeOverrides } from 'naive-ui'

  const themeOverrides: GlobalThemeOverrides = {
    common: {
      primaryColor: '#FF0000'
    },
    Button: {
      textColor: '#FF0000'
    }
  }

  // ...
</script>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <my-app />
  </n-config-provider>
</template>

4.调整组件主题变量

组件主题变量使用方法同全局主题变量使用方法，并且组件主题变量会覆盖全局主题变量。

<script lang="ts">
  import { SelectProps, ButtonProps } from 'naive-ui'

  type SelectThemeOverrides = NonNullable<SelectProps['themeOverrides']>
  type ButtonThemeOverrides = NonNullable<ButtonProps['themeOverrides']>

  const selectThemeOverrides: SelectThemeOverrides = {
    menuBoxShadow:
      '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)',
    peers: {
      InternalSelection: {
        textColor: '#FF0000',
        heightMedium: '42px'
      }
    }
  }
  const buttonThemeOverrides: ButtonThemeOverrides = {
    heightMedium: '40px',
    textColor: 'rgba(24, 127, 231, 1)'
  }

  // ...
</script>

<template>
  <n-select
    v-model:value="value"
    :options="options"
    :theme-overrides="selectThemeOverrides"
  />
  <n-button :theme-overrides="buttonThemeOverrides">theme</n-button>
</template>

5.不同主题下调整主题变量

如果你想要在亮色和暗色上同时使用不同的主题变量，可以来看看这个。

<script>
  import { NConfigProvider, darkTheme } from 'naive-ui'

  /**
   * @type import('naive-ui').GlobalThemeOverrides
   */
  const lightThemeOverrides = {
    common: {
      primaryColor: '#000000'
    }
    // ...
  }

  const darkThemeOverrides = {
    common: {
      primaryColor: '#FFFFFF'
    }
    // ...
  }

  const theme = null
  // ...
</script>

<template>
  <n-config-provider
    :theme="theme"
    :theme-overrides="theme === null ? lightThemeOverrides : darkThemeOverrides"
  >
    <my-app />
  </n-config-provider>
</template>

6.使用 peers 主题变量

很多时候组件内部都会复用另一个组件，因此出现了 peers 的主题变量。

peers 相关的主题变量还没有暴露，使用 GlobalThemeOverrides 可以查看对应组件的 peers 变量。

具体哪些可使用的 peers 后续会更新。

<script lang="ts">
  import { NConfigProvider, GlobalThemeOverrides } from 'naive-ui'

  const themeOverrides: GlobalThemeOverrides = {
    Select: {
      peers: {
        InternalSelection: {
          textColor: '#FF0000'
        },
        InternalSelectMenu: {
          borderRadius: '6px'
        }
      }
    },
    DataTable: {
      paginationMargin: '40px 0 0 0',
      peers: {
        Empty: {
          textColor: '#ccc'
        },
        Pagination: {
          itemTextColor: '#ccc'
        }
      }
    }
    // ...
  }
  // ...
</script>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <my-app />
  </n-config-provider>
</template>

7.同步 body 元素的样式

出于以下原因，你可能需要将某些样式设定在 document.body 上。

  1. naive-ui 会设定一些非响应式的全局样式（例如字体），它们在默认状况下工作良好，但是不能响应主题的变化。
  2. n-config-provider 无法将全局样式同步到它以外的地方（例如 body 背景色）。

通过使用 n-global-style 可以将常见的全局样式同步到 body 上。在下面的例子中，n-global-style 会将 n-config-provider 提供的主题同步到 document.body 上。

<template>
  <n-config-provider>
    <app />
    <n-global-style />
  </n-config-provider>
</template>

8.主题编辑器

naive-ui 提供主题编辑器帮助你方便的编辑主题并导出对应配置。它可以被嵌套于 n-config-provider 中。

主题编辑器不包含在全局安装中（app.use(naive)）。你需要显式引入来使用它。

<template>
  <n-theme-editor>
    <app />
  </n-theme-editor>
</template>

<script>
  import { defineComponent } from 'vue'
  import { NThemeEditor } from 'naive-ui'

  export default defineComponent({
    components: {
      NThemeEditor
    }
  })
</script>

了解更多关于 n-config-provider 的信息，参见 全局化配置。 

五.全局化配置 Config Provider

全局化配置设置内部组件的主题、语言和组件卸载于其他位置的 DOM 的类名。

1.设置 n-config-provider 内部组件的主题。

<template>
  <n-config-provider :theme="theme">
    <n-card>
      <n-space>
        <n-button @click="theme = darkTheme">
          深色
        </n-button>
        <n-button @click="theme = null">
          浅色
        </n-button>
      </n-space>
    </n-card>
  </n-config-provider>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { darkTheme } from 'naive-ui'
import type { GlobalTheme } from 'naive-ui'

export default defineComponent({
  setup () {
    return {
      darkTheme,
      theme: ref<GlobalTheme | null>(null)
    }
  }
})
</script>

2.API

名称类型默认值说明版本
abstractbooleanfalse是否不存在 DOM 包裹
breakpoints{ [k: string]: number }{ xs: 0, s: 640, m: 1024, l: 1280, xl: 1536, xxl: 1920 }屏幕响应式断点，对 n-grid 生效。这个属性不是响应式的，你需要在组件第一次挂载时就设定好
cls-prefixstringn内部所有组件的类的前缀，仅首次设定会生效
date-localeDateLocale | nullundefined对后代组件生效的日期语言对象，为 null 时会使用默认 dateEnUS，为 undefined 时会继承上级 n-config-provider
inline-theme-disabledbooleanfalse是否禁用 inline css 主题变量，如果你不会频繁调整主题变量，并且需要 SSR 或者想让 devtools 看起来更干净，可以打开这个选项。注意，这个属性不是响应式的2.26.0
katexobjectundefined公式组件需要的 katex 对象2.34.0
localeLocale | nullundefined对后代组件生效的语言对象，为 null 时会使用默认 enUS，为 undefined 时会继承上级 n-config-provider
namespacestringundefinedn-config-provider 内部组件被卸载于其他位置的 DOM 的类名
preflight-style-disabledbooleanfalse是否禁用默认样式，如果你禁用了它，便可以完全控制全局样式。你也可以使用 n-global-style 去挂载全局样式（推荐，样式是响应式的）2.29.0
tagstring'div'n-config-provider 被渲染成的元素
themeTheme | nullundefined对后代组件生效的主题对象，为 null 时会使用默认亮色，为 undefined 时会继承上级 n-config-provider。更多信息参见调整主题
theme-overridesThemeOverrides | nullundefined对后代组件生效的主题变量覆盖，为 null 时会清除全部覆盖变量，为 undefined 时会继承上级 n-config-provider。更多信息参见调整主题

六.支持的平台

1.浏览器

不支持 IE 浏览器。

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

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

2.Vue

只支持 Vue 3（>3.0.5）。

3.TypeScript

需要版本 > 4.1。

peachban
关注
  • 33
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Naïve UI——一个 Vue 3 组件库
猿小白的博客
03-14 3万+
注意，naive-ui 仅支持 Vue3。如果你在使用 Vue2，可以去看看别的库。 官网文档地址：https://www.naiveui.com/zh-CN/light/docs/introduction 一、安装Naive UI npm i -D naive-ui 然后安装Naive UI需要的字体 ： npm i -D vfonts 二、如何使用 （1）局部安装（推荐） 你可以直接导入组件并使用它。这种情况下，只有导入的组件才会被打包。 <templat..
基于Vue3+TS, 使用Naive UI组件库开发的后台管理系统.zip
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
nai-vue:一个简单的网站，由Vue 3编写
04-05
奈 一个简单的网站。 由Vue撰写3。 访问： ： 用React和NextJS编写的花药版本，遵循 截屏
vue 3.0尤雨溪亲推ui组件库naive
热门推荐
秋来九月八
07-02 1万+
2021年6月7日 尤雨溪在微博上推荐了naive 这个来自图森未来的开源组件库。
Vite3+Vue3+ts+pinia+NaiveUI项目实战--国际化配置
最新发布
04-29 460
因为项目是给设在新加坡、马来西亚的海外自提站使用的后台，所以国际化的配置必不可少。
探索优雅前端框架：Naive UI
gitblog_00069的博客
03-19 472
探索优雅前端框架：Naive UI 项目地址:https://gitcode.com/TuSimple/naive-ui Naive UI 是一个由TuSimple开发并维护的现代化、轻量级且高度可定制的Vue 3组件库。它旨在提供一套简洁、直观且易于使用的界面元素，帮助开发者快速构建美观的应用程序。 项目简介 Naive UI 提供了包括按钮、输入框、布局、表格、提示等在内的数十种常见UI组件，...
Naive UI Admin后台管理系统的组件BasicTable使用指南
qq_15233495的博客
03-10 2332
BasicTable集成了很多功能，如下：（1）分页信息，可以自定义分页字段名，方便和后端做数据交互。（2）可编辑单元格，通过配置column的edit属性使该列渲染为可编辑组件，同时支持整行编辑。（3）基础工具，包括表格斑马纹显示、刷新、密度以及列相关的设置选项。（4）动态计算调整表格的高度
通过naive ui 封装表格
qq_46030141的博客
07-07 323
naive ui 创建的表格
基于Vue3, 使用Naive UI组件库开发的后台管理系统.zip
05-26
基于Vue3, 使用Naive UI组件库开发的后台管理系统.zip
Naive UI的安装及使用
m0_52364694的博客
09-12 4851
一、安装 首先安装Naive UI的包 npm i -D naive-ui 再安装字体库 npm i -D vfonts 二、全局引入 main.js中添加代码 import naive from 'naive-ui' app.use(naive) 三、使用（按钮示例） App.vue中 <script setup> import { NButton } from "naive-ui"; </script> <template> <n-space>
太漂亮了，naive-ui组件库
weixin_40945354的博客
03-29 986
<template> <n-button>default</n-button> <n-button type="primary">Primary</n-button> <n-button type="info">Info</n-button> <n-button type="success">Success</n-button> <n-button type="warning
Naive UI初体验，跟随大佬们的脚步！
qq_41540361的博客
06-22 9711
本文相对应的链接地址 Naive UI: https://www.naiveui.com/zh-CN/os-theme Vue 3: https://v3.cn.vuejs.org/ Vite中文网: https://vitejs.cn/ 前言 尤雨溪推荐的 Vite 和 Naive UI 这也是我第一次使用 Vite 和 Naive UI Vite 安装 Vite NPM 安装 npm init @vitejs/app 让我们打开 CMD （ WIN + R ） 所有操作一目了然，非常的便捷 那项目
Lumen IM 是一个网页版在线聊天项目前端使用 Naive UI + Vue3后端采用 GO 开发
04-14
该项目的前端采用了 Naive UI 和 Vue3 技术，确保了界面友好性和流畅性。而后端则是采用 GO 语言开发，为系统提供稳定高效的支持。该项目支持多种聊天消息类型，包括文本消息、代码块、群投票、图片以及其他类型文件...
基于 Ant Design 和 Vue 3 的企业级 UI 组件
05-01
基于 Ant Design 和 Vue 3 的企业级 UI 组件。提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 Vue 组件。共享 Ant Design of React 设计工具体系。支持环境。现代浏览器。1.x 版本支持 IE 9+（需要 ...
Lumen IM 是一个网页版在线聊天项目，前端使用 Naive UI + Vue3，后端采用 GO 开发 .zip
04-03
Lumen IM 是一个网页版在线聊天项目，前端使用 Naive UI + Vue3，后端采用 GO 开发。
Naive UI：一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，快有点意思。
chenchuang0128的博客
03-24 1484
在当今的前端开发领域，Vue 3已成为中后台应用的首选框架。为了满足开发者的需求，各种组件库如雨后春笋般涌现。其中，Naive UI以其独特的优势，成为了Vue 3开发者的得力助手。本文将深入探讨Naive UI的特性、优势以及如何使用它来提高开发效率。一、Naive UI的特性组件丰富：Naive UI提供了超过80个组件，覆盖了表格、表单、弹窗、图表等多个方面。这些组件不仅功能强大，而且高度可定制化，满足了各种业务需求。主题可调：Naive UI提供了一个先进的类型安全主题系统。
安装Naive UI【包含自动导入常用组件】
qq_22841387的博客
03-16 2593
> 官方安装地址： > > [安装 - Naive UI](https://www.naiveui.com/zh-CN/light/docs/installation) ## 1.npm安装Naive UI ```css cnpm i naive-ui ``` ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vQGVEWdj-1647402006040)(assets/image-20220316113501-tu0sgiu.png)\]](https://img-
naive ui自动引入
Ttowx的博客
11-03 769
naive UI安装及自动引入
Vue3框架下的顶尖UI组件库大盘点
Handsome_gir的博客
04-03 1005
推荐几款适合vue3框架的ui组件库，包括适用后台管理及移动端。
vue3 使用 naive ui 写哥后台界面
09-04
Vue 3是一个流行的JavaScript框架，用于构建用户界面。Naive UI是一套基于Vue 3的组件库，专注于提供易于使用、高效的用户界面设计工具。结合使用Vue 3和Naive UI可以帮助我们快速构建美观、功能齐全的哥后台界面。 首先，我们需要在项目中安装Vue 3和Naive UI的依赖包。可以使用npm或者yarn进行安装。安装完成后，我们可以在代码中引入Vue和Naive UI的组件，开始构建界面。 在哥后台界面中，常见的需求包括展示数据、表单输入、图表展示等。Naive UI提供了丰富的组件库，包括表格、表单、图表等，可以满足大部分的界面需求。 在编写代码时，我们可以使用Vue的组件机制构建界面。Vue 3引入了Composition API，可以让我们更方便地组织和重用代码逻辑。 例如，我们可以创建一个哥后台页面组件，其中包含多个Naive UI的组件。可以使用Grid布局系统对页面进行排列和定位。 此外，Naive UI还提供了一些高级功能，如自定义主题、国际化支持等。我们可以根据自身需求来使用这些功能。 总的来说，Vue 3和Naive UI的结合能够快速、高效地开发哥后台界面。Vue 3提供了强大的界面构建能力，而Naive UI提供了丰富的组件库和工具，可以加速开发过程，并帮助我们实现漂亮、易于使用的用户界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值