3.5 演示库测试组件

3.5.1 全局注册

全局注入是最常见的一种开发方法，好处在于一次注入，任意位置使用。缺点在于会增加项目的整体体积，如代码清单library-03-7所示。

代码清单 library-03-7
> examples/src/main.js：
import { createApp } from 'vue'
import App from './App.vue'
// 相对路径引入组件库
import Azong from "../../packages"
const app = createApp(App)
app.use(Azong).mount('#app')

> examples/src/App.vue
<template>
    <a-button></a-button>
</template>

examples演示库的main.js文件中使用相对路径引入packages组件库（第5行），并自定义名称为Azong，然后使用Vue3.js实例对象的.use方法全局注册组件库（第7行）。

App.vue文件中的template模板层便可使用组件名称渲染组件（第10~12行），渲染效果如图3-12所示。

图3-12 全局注册组件库测试button按钮

由于UI组件库的开发和演示库均的预览是在本地环境，因此采用相对路径的方式引用。我们将在第18章完成组件库打包，发布至npm后便可使用npm install方法安装我们自己开发的UI组件库。

3.5.2 按需加载

按需加载是使用支持ES Modules方法引入的组件，好处在于按需加载的方式可以减小项目的体积，提升性能，如代码清单library-03-8所示。

代码清单 library-03-8
> examples/src/App.vue
<template>
    <a-button></a-button>
</template>

<script setup>
    import { AButton } from '../../packages';
</script>

按需加载同样是使用相对路径的方式引入，通过import关键字导入AButton组件即可，无需在main.js中全局注册组件，渲染效果与图3-12一致。