介绍

Naive UI是一个基于Typescript开发的针对Vue3开发的UI组件库，由TuSimple（图森未来）公司开发并开源，下面是组件文档针对Naive UI的一句话描述：

一个 Vue 3 组件库 比较完整，主题可调，使用 TypeScript，不算太慢 有点意思！

Naive UI的一些特点

• 组件完整

组件库相对完整，有大约70个组件，能帮你节省不少时间。

它们全都可以 treeshaking。

• 主题可调

它提供了一个使用 TypeScript 构建的先进的类型安全主题系统。只需要提供一个样式覆盖的对象，即可完成主题的配置。

不用 less、sass、css 变量，也不用 webpack 的 loaders。而且在文档右下角提供了即时的主题编辑器可以快速的构建自己的主题

• 使用 TypeScript

Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。

不需要导入任何 CSS 就能让组件正常工作。

• 性能优化

select、tree、transfer、table、cascader 都可以用虚拟列表。

• 开源协议

基于MIT的开源协议

安装

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

npm i -D naive-ui

npm i -D vfonts

兼容性

• 浏览器

不支持 IE 浏览器，懂得都懂

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

• Vue

只支持 Vue 3（>3.0.5）。

• TypeScript

需要版本 > 4.1。

使用

• 推荐用法（Tree Shaking）

可以直接导入组件并使用它。这种情况下，只有导入的组件才会被打包。

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

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

  export default {
    components: {
      NButton
    }
  }
</script>

//如果你可以使用 setup script，你可以用下面的方式使用组件。

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

<script setup>
  import { NButton } from 'naive-ui'
</script>

启用 JSX & TSX

关于启用 JSX 和 TSX，请参考你使用的工具链的相关文档。

• 使用组件

在 JSX 中，推荐以直接引入的形式使用组件。

import { defineComponent } from 'vue'
import { NButton } from 'naive-ui'

export default defineComponent({
  render () {
    return <NButton>{{ default: () => 'Star Kirby' }}</NButton>
  }
})

包括的组件

通用组件 (19)
头像 Avatar
按钮 Button
卡片 Card
折叠面板 Collapse
分割线 Divider
下拉菜单 Dropdown
文本省略 Ellipsis
渐变文字 Gradient Text
图标 Icon
页头 PageHeader
标签 Tag
排印 Typography
数据录入组件 (19)
自动填充 Auto Complete
级联选择 Cascader
颜色选择器 Color Picker
复选框 Checkbox
日期选择器 Date Picker
动态录入 Dynamic Input
动态标签 Dynamic Tags
表单 Form
文本输入 Input
数字输入 Input Number
提及 Mention
单选 Radio
评分 Rate
选择器 Select
滑动选择 Slider
开关 Switch
时间选择器 Time Picker
穿梭框 Transfer
上传 Upload
数据展示组件 (14)
日历 Calendar
代码 Code
数据表格 Data Table
描述 Descriptions
无内容 Empty
图像 Image
列表 List
日志 Log
统计数据 Statistic
表格 Table
东西 Thing
时间 Time
时间线 Timeline
树 Tree
导航组件 (9)
固钉 Affix
侧边导航 Anchor
回到顶部 Back Top
面包屑 Breadcrumb
加载条 Loading Bar
菜单 Menu
分页 Pagination
步骤 Steps
标签页 Tabs
反馈组件 (15)
警告信息 Alert
标记 Badge
对话框 Dialog
抽屉 Drawer
信息 Message
模态框 Modal
通知 Notification
弹出确认 Popconfirm
弹出信息 Popover
弹出选择 Popselect
进度 Progress
结果页 Result
骨架屏 Skeleton
加载 Spin
弹出提示 Tooltip
布局组件 (3)
布局 Layout
栅格 Grid
间距 Space
配置组件 (3)
全局化配置 Config Provider
元素 Element
全局样式 Global Style

部分组件预览

由于组件比较多，以下只是截取部分截图，详细地使用和风格可以到官方文档查看

总结

Naive UI是一个值得推荐使用的Vue组件库，从项目的走心程度来看，Naive UI绝不会是一个差劲的作品，相反它很优秀！文档中有一个叫做thing（东西）的组件很有意思，如下：