NaiveUI的简单使用

前言

对新的东西总是比较好奇，觉得知道多一点选择就多一点，说不定哪天就用到了。昨天尤老师发布了一条微博，说图森未来的小伙伴开源了一个Vue 3组件库 Naive UI，看上去很不错。于是我今天来体验体验！

1.png

创建项目

首先我们来创建一个vue3项目，我这里使用vite来创建：

$ npm init vite-app naiveui-demo
$ cd naiveui-demo
$ npm install
$ npm run dev

你也可以选择其他你喜欢的方式

NaiveUI介绍

Naive UI由图森未来开源的一个Vue3的组件库（目前仅支持Vue3），该项目具有以下几个特点：

• 比较完整
  有超过70 个组件，特点是它们全都可以treeshaking

• 主题可调
  提供了一个使用 Typescript构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象。不用 less、sass、css变量，也不用webpack 的 loaders

• 使用 Typescript
  Naive UI全量使用Typescript编写，和你的Typescript 项目无缝衔接。你不需要导入任何 CSS 就能让组件正常工作

• 不算太慢
  select、tree、transfer、table、cascader 都可以用虚拟列表

安装

使用 npm 安装。

npm i -D naive-ui

使用方式

我们先在项目的src\components目录下新建一个组件：Naiveui.vue

接着，我们可以选择直接引入或全局安装。先使用第一种方式直接引入，也是推荐的一种方式

//src\components\Naiveui.vue

然后将我们的组件引入App.vue中即可

//src\App.vue

于是我们的按钮就会出现在页面中，如下

动画1.gif

我们也可以全局引入，但会失去 tree-shaking的能力，打包有冗余代码。

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import naive from 'naive-ui'

const app = createApp(App)
app.use(naive)
app.mount('#app')

安装后，你可以在SFC中使用全部组件，这样就不用一个一个导入了，为了方便测试

使用更多组件

我们上面配置了全局安装，那如何使用更多组件。使用过程也很简单，即复制、粘贴、页面展示。
如下

动画2.gif

展示效果

由于组件太多，这里随机截取几张官网的图来展示一下

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

更多详情可以移步官网：https://www.naiveui.com/zh-CN/os-theme

总结

总体来说第一印象是不错的，下次可以考虑用NaiveUI做个功能较全的采坑案例