书接上文，我们在一个Vue3项目中使用vite进行了项目初始化，引入了Vue-router做路由管理，使用axios请求后端的接口。现在补上UI框架，剩下的就是关心你的业务实现了。

官方传送门：Naive UI 一个 Vue 3 组件库

这个UI库不适配Vue2，如果使用了，为了节省读者宝贵的时间，无需往下读了。

1. 初次使用

	import { createApp } from 'vue'
	import App from './App.vue'
	import router from './router'
	import naive from 'naive-ui'
	/*这种方式是全局挂载，全局挂载在项目打包时会打包冗余的js代码，
	即失去 tree-shaking 能力，初学者建议使用这种方式*/
	createApp(App).use(router).use(naive).mount('#app')

2. 在vue模板中引用，直接使用Naive UI 标签，无需再component注册组件

	<template>
	  <n-layout-header bordered >
	    <div>
	      <img src="@/imgs/logo.png" />
	    </div>
	  </n-layout-header>
	</template>

全局引用比较方便易上手，但是打包时JS代码比较臃肿，如果不是第一次使用建议使用按需引入。其他的文章会已踩坑日记的方式发布，不再更新更详细的教程了。

传送门: NaiveUI组件官方示例