这是我参与更文挑战的第2天，活动详情查看：更文挑战

简述

最近尤大大推荐了一个组件库叫naiveui，好奇就去看了一下，发现组件还真的挺丰富的，数了一下大概75个，比antd都多，可能是我见过最多的组件库，于是打算尝个鲜踩踩坑，拿个todo练练手

官网地址：www.naiveui.com/zh-CN/os-th…

安装：

npm i -D naive-ui

按需加载

默认支持按需加载，不像ant和element-plus似的还需要引入插件
只需要 import { NForm, NFormItem, NInput, NButton, NSpace } from "naive-ui";
然后使用components注册即可

遇到的坑

1. 图标库使用的xicons，对应需要安装vue版本的插件@vicons/对应的图标库，但是到这个网站www.xicons.org/#/

注意：
xicons分了好几类图标库，如果使用其中一种，需要安装对应的图标库分类的插件，比如使用fluent和ionicon5这两个，则需要安装@vicons/fluent和@vicons/ionicons5，我开始没有注意到这点，导致在其中一个库里搜索另外一个库的图标搜不到，还以为是支持的不全

2. popconfirm在tsx的形式下，不支持在组件标签之间定义slot，如下所示

 <NPopconfirm
  >
    确认删除吗?
    {{
      trigger: () => <NButton type='error' ghost>删除</NButton>
    }}
  </NPopconfirm>
复制代码

只能通过v-slots实现slot分发

<NPopconfirm  
    v-slots={{
      trigger: () => <NButton type='error' ghost>删除</NButton>
    }}
>
    确认删除吗?
</NPopconfirm>
复制代码

3. form默认没有提供resetFields方法，如果想重置表单的值需要自己手动重置，form组件只提供了重置错误提示的方法

参考作者给的方案：github.com/TuSimple/na…

4. table组件如果想给每列设置边框，类似于antd的table的bordered属性，在naiveui中光设置bordered只能给table的最外层加border，需要在单独设置一个属性叫:single-line="false"才可以达到bordered效果，这个属性在文档中并没有明确说明。

5. form表单校验的时候，rules必须是一个对象类似：

  const rules = {
    title: {
      required: true,
      message: "请填写todo的title",
    },
  };
复制代码

要使规则生效，需要在form-item设置属性path，elem的prop，antd的name属性，暂时还没有试一个属性应用多个规则是什么样

6. table组件如果想自定义渲染列，只能使用jsx或者render函数的形式，暂时没有提供模板slot的方式，

具体原因请看：github.com/TuSimple/na…
确实，我平时用的render函数的方式也更多一些，但是感觉为了更好的推广，要是支持slot的形式可能更好一些，还有在使用render方法的时候，传入的每行的数据都是组件库的RowData的类型，如下所示：

render: (rowData: RowData, rowIndex: number): VNodeChild 
复制代码

如果没有这个限定，能够使用自己定义的类型就好了，每次都需要转换成自己定义的类型，

rowData as any as DataItem
复制代码

感觉略微有点麻烦，antd就可以直接在使用的时候限定为自己定义的类型比如这样：

 customRender: ({ record }: { record: DataItem }): JSX.Element
复制代码

总结

做了一个todo之后，总体感觉效果很不错，流畅，就是form稍微有点用着不是非常顺，table基本能符合我平时使用习惯，使用体验和antdv有些类似，效果也比较贴近antdv，但是有种清新风格。暂时还是观察一段时间再说，现在还不敢应用到正式项目中，自己项目可以用用，尝鲜踩坑倒是没有啥太大的问题。

代码地址

github：github.com/nabaonan/to…