Vue插件开发，全局插件和按需加入插件

年前手下事情少，找了一个下午研究了一下Vue插件开发，首先要感谢B站的前端小野森森-2，借鉴了他的视频，自己也写了一下。把过程记录下来。

首先用vite建一个空项目。

然后新建modules文件夹，和src同级，再在下面建一个插件文件夹yy，本次就用两个插件，一个button，一个input,分将两个文件夹建在yy文件夹下，每个文件夹下新建button.vue和input.vue文件

-- button.vue
<template>
  <button><slot></slot></button>
</template>

<script>
export default {
    name:'yybutton'
}
</script>

<style>

</style>

-- input.vue
<template>
  <input type="text" :value="text" />
</template>

<script>
export default {
    name:'yyinput',
    props:{
        text:String
    }
}
</script>

<style>

</style>

在yy文件夹下新建index.js，为main.js中use使用

import button from './button/button.vue'
import input from './input/input.vue'

const yy = {}
const yybutton = {}
yybutton.install = Vue => Vue.component(button.name, button)

const COMPONENTS = [button, input]

yy.install = function (Vue, options) {
    COMPONENTS.forEach((component) => {
        Vue.component(component.name, component);
    })
}

export default yy   --抛出所有
export { yybutton } --按需添加

其中yybutton抛出是可以进行按需加载，而yy是总的插件包。有新插件时在index.js中进行添加。

然后在main.js中use

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { yybutton } from '../modules/yy'
import yy from '../modules/yy';

createApp(App).use(yy).mount('#app')

这里的use(yy)是加载所有的，也可以use(yybutton)进行按需添加。

最后在app.vue中使用，就完成了。

<script setup>
</script>

<template>
  <div>
    <yybutton>我的按钮</yybutton>
    <yyinput text="我的input"></yyinput>
  </div>
</template>

源码下载地址：https://pan.baidu.com/s/12nzjKALNbxju7t_kZ4Dejg 提取码: qtgc