#插件

插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object，也可以是 function

/**
* plugin: 要安装的插件 如 ElementUI
* options: 插件的配置信息 如 {size: 'small'}
*/
Vue.use(plugin, options)

插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。如：vue-custom-element
2. 添加全局资源：指令/过渡等。如：vue-touch）
3. 通过全局 mixin 来添加一些组件选项。(如vue-router)
4. 添加全局实例方法，通过把它们添加到 config.globalProperties 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

#编写插件

当这个插件被添加到应用程序中时，如果它是一个对象，就会调用 install 方法。如果它是一个 function，则函数本身将被调用。在这两种情况下——它都会收到两个参数：由 Vue 的 createApp 生成的 app 对象和用户传入的选项。

让我们从设置插件对象开始。建议在单独的文件中创建它并将其导出，如下所示，以保持包含的逻辑和分离的逻辑。

自定义组件UI

<!-- path

|--usec
|--|--MyButton.vue
|--|--index.js

|--mail.js

-->

<template>
    <div>          
        <button class="my_bt"> 
            <!--  使用插槽 -->
            <slot></slot>
        </button>
    </div>
</template>
<script>
export default {
    name:'MyButton'
}
</script>
<style scoped>
/* @import url(); 引入css类 */

.my_bt {
    padding: 10px;
    background-color: #ccb43f;
    color: #fff;
}

.my_bt:hover {
    cursor: pointer;
}
</style>

• 定义js

// index.js
// 定义 /usec/MyButton.vue
import MyButton from '@/usec/MyButton';

/*  /usec/index.js */
export default {
    install: (app, options) => {
        //    注册自定义组件
        app.component(MyButton.name, MyButton)
    }
}
// 多个组件
const comps = [
    MyButton
]

export default {
    install: (app, options) => {
        //    注册自定义组件
        // 使用循环注册
        /*
            使用循环注册
            options 获取app.use 参数，来进行逻辑上的按需引入
            opt:['input ','mybutton','hoverlist']
            if(comp.name == opt[i]){
                app.compoment
            }
        */
        comps.map(comp=>{
            app.component(comp.name, comp)
        })
    }
}

• 在main.js中使用

import MyUI from '@/usec'
const app = createApp(App);

app.use(MyUI,
// 可根据此选项选择按需导入 
 {
     opt:['input ','mybutton','hoverlist']
 })

按需导入

const comps = [
    MyButton
]

export default {
    install: (app, options) => {
        //    注册自定义组件
        console.log(options,'options')
        // 使用循环注册
        /*
            使用循环注册
            options 获取app.use 参数，来进行逻辑上的按需引入
        */
        comps.map(comp=>{
            app.component(comp.name, comp)
        })
    }
}

最后参考

awesome-vue 集合了大量由社区贡献的插件和库。