在使用vue框架实现项目需求中，会将功能抽离成组件进行复用，今天整理一下组件的引入方式

一：常用引入方式

1：全局引入/全量引入，

一次引入，整个项目可以使用

import NutUI from '@nutui/nutui'
import '@nutui/nutui/dist/style.css'

...
app.use(NutUI)

优点：只引入一次，全站可以使用

缺点：打包产物体积较大，存在大量冗余代码，影响页面加载速度

2：局部引入/按需引入，

只将用到的组件及其样式文件引入，减小项目体积。这种方式下，组件库需要分别考虑组件代码与样式代码的按需引入方式

import { Button } from '@nutui/nutui'

优点：减小项目体积，使用时才引用

缺点：分别引入，过于耗时费力

二：自动按需引入，采用插件unplugin-vue-components，

1：定义：插件会在项目构建时自动将对应的组件引入和组件样式引入语句添加进代码里，不再需要手动引入和注册组件

https://github.com/antfu/unplugin-vue-components

2：原理：构建工具将组件库中的 Vue SFC 或者 JSX 文件转换为 JS 文件时，会通过 resolveComponent 方法注册组件，

unplugin-vue-components 会在这时匹配文件中的这些注册语句，收集用到的组件名称，与组件库的配置函数进行匹配，命中后就会导入对应的组件并注册，同时引入目标组件的副作用代码