粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

theme: cyanosis

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

前言

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

创建项目

首先我们来创建一个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
<template>
  <n-button>naive-ui</n-button>
</template>

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

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

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


//src\App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <Naiveui />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Naiveui from './components/Naiveui.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Naiveui
  }
}
</script>

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

动画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中使用全部组件，这样就不用一个一个导入了，为了方便测试