vue 3.0尤雨溪亲推ui组件库naive_navie ui

前言

2021年6月7日 尤雨溪在微博上推荐了naive 这个来自图森未来的开源组件库。

Naive UI 是一个基于 Vue 3 的开源 UI 组件库，它提供了一组丰富的UI组件，用于构建现代、美观、易用的Web应用程序。这个组件库专注于性能、可访问性、易用性和可定制性，使开发者能够轻松地创建高质量的用户界面。

以下是一些 Naive UI 的主要特点和亮点：

1. Vue 3 原生支持：Naive UI 是专为 Vue 3 开发的，充分利用 Vue 3 的 Composition API 和响应性系统。

2. 丰富的组件：它提供了大量的UI组件，包括按钮、输入框、表格、对话框、菜单、标签页、图标等等，涵盖了构建Web应用所需的各种元素。

3. 性能优化：Naive UI 使用虚拟滚动和其他性能优化技术，确保在处理大型数据集时也能保持高性能。

4. 可访问性：这个组件库注重可访问性，它的组件都经过设计和测试，以确保符合Web内容无障碍指南（WCAG）要求。

5. 易用性：Naive UI 的API和文档非常易于理解和使用，使开发人员能够快速上手。

6. 定制主题：它支持主题定制，你可以轻松更改组件的外观以适应你的项目风格。

7. 国际化支持：提供了多语言支持，可以轻松本地化应用程序。

8. 活跃的社区：Naive UI 有一个活跃的开发和用户社区，提供了许多示例、文档和支持。

Naive UI 是一个强大的工具，可用于构建各种类型的Web应用程序，包括管理面板、数据仪表板、电子商务网站等等。如果你使用Vue 3，并正在寻找一个功能丰富、高性能、可访问和易用的UI组件库，Naive UI 可能是一个不错的选择。

naive ui 组件库官网 https://www.naiveui.com/zh-CN/os-theme

安装naive-ui 组件

npm i -D naive-ui
或
yarn add naive-ui
1
2
3

安装 naive 字体

npm i -D vfonts
或
yarn add vfonts
1
2
3

全局引入naive的两种方式

全局安装（不推荐）
失去 tree-shaking 的能力，打包有冗余代码。

import { createApp } from 'vue'
import naive from 'naive-ui'
const app = createApp(App)
app.use(naive)
1
2
3
4

按需全局安装

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

我的项目是这样按需全局安装的

修改项目根目录src文件下的main.ts

因为我在项目中使用了router 和 store

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

import { create, NButton } from 'naive-ui'

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

createApp(App)
  .use(store)
  .use(router)
  .use(naive)
  .mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

引入字体文件

只需要在你 App 的入口文件导入字体，即可调整 Naive UI 的字体。

// 你 App 的入口 js 文件
// ...

// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'

const app = createApp()
app.use(naive)
1
2
3
4
5
6
7
8
9
10

组件中使用naive-ui组件库

由于我在全局main.ts引入Nbutton了，所以在组件中无需再引入，直接使用。

<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">Warning</n-button>
   <n-button type="error">Error</n-button>
</template>

<script>
export default {}
</script>

<style></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

当然也可以在组件中单独引入

<template>
    <n-card title="卡片"> 卡片内容 </n-card>
</template>

<script>
import { NCard } from 'naive-ui'
export default {
  components: {
    'n-card': NCard
  }
}
</script>

<style></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

调整主题色和主题变量

官网有很清晰的介绍
https://www.naiveui.com/zh-CN/os-theme/docs/customize-theme

在App.vue进行配置主题变量和主题色

<script>
import { NConfigProvider } from 'naive-ui'
const themeOverrides = {
  common: {
    primaryColor: '#ff2d52'
  },
  Button: {
    textColor: '#ff2d52'
  },
  Select: {
    peers: {
      InternalSelection: {
        textColor: '#FF0000'
      }
    }
  }
  // ...
}
export default {
  data() {
    return {
      themeOverrides
    }
  },
  components: {
    'n-config-provider': NConfigProvider
  }
}
</script>
<style lang="css"></style>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <router-view />
  </n-config-provider>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

最终的效果

naive 官网给了很多变量可以配置

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

官网有更多的组件，大家可以一起来体验

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