vue抽离自定义指令和自定义组件（个人组件库封装逻辑）

本文使用vue3作为示例，对自定义指令和自定义组件进行封装和融合，最后达到封装个人组件库，达到不同项目功能组件都可以复用的目的。

封装思维

我们在使用vue-router，pinia，element-plus，等组件的时候，我们有没有想过一个问题，element-plus是如何把组件和一些指令注册到我们的项目当中。

我们使用use方法又如何可以把这些组件注册成全局组件，供我们全局调用。

关键：其实app.use(module)会执行里面的一个默认会执行该函数里面的install函数

那么按照这个逻辑我们是否也能封装属于自己的组件库呢？

方法实践

首先我们创建一个js文件，写一个导出模块，里面只有一个install方法，且install方法会指向vue的实例

//index.js
export default {
    install(app) {
        console.log('我被执行了');
    }
}

在main.js引入这个文件，并使用app.use(index)执行这段命令

import index from './index'
app.use(index)

我们发现这段命令被执行了，那么现在我们就可以把我们的组件和指令放入到这个文件中，作为自己的组件库，去执行这个文件。

代码实现

//index.js
//引入echart组件
import Chart from '@/components/echarts/chart.vue';
//拖拽指令
import drag from '@/utils/draggable';
export default {
    install(app) {
        console.log(app);
         app.component('Chart', Chart);
         app.directive('drag', drag);
    }
}

//main.js
import index from './index'
app.use(index)

这里我们可以创建一个文件夹，然后写自定义指令和组件到改文件夹中，然后使用这种方式引入他，这样就算我们到另一个项目，也只需要拷贝这个文件夹，然后直接使用use方法调用组件库就可以了。