大前端，这可能是最走心的Vue3组件库——Naive UI

介绍

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 3（>3.0.5）。

TypeScript

需要版本 > 4.1。

使用

推荐用法（Tree Shaking）

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

[xss_clean]  import { NButton } from 'naive-ui'  export default {    components: {      NButton    }  }[xss_clean]//如果你可以使用 setup script，你可以用下面的方式使用组件。[xss_clean]  import { NButton } from 'naive-ui'[xss_clean]

启用 JSX & TSX

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

使用组件

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

import { defineComponent } from 'vue'import { NButton } from 'naive-ui'export default defineComponent({  render () {    return {{ default: () => 'Star Kirby' }}  }})

包括的组件

通用组件 (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