我学习用vue3写的特别好的后台Vben遇到的坑——插件是什么

我是2022年11月20号入职的，现在工作已经有1年15天了，这是我在掘金的第三篇文档。

听我们公司带我的人说，vben是使用vue3写的特别好的后台管理系统，然后我就打算用今年半年的时间来研究它。

上周五我就碰上了这样的代码

export type WithInstall<T> = T & {
  install(app: App): void;
} & EventShim;

export type CustomComponent = Component & { displayName?: string };

export const withInstall = <T extends CustomComponent>(component: T, alias?: string) => {
  (component as Record<string, unknown>).install = (app: App) => {
    const compName = component.name || component.displayName;
    if (!compName) return;
    app.component(compName, component);
    if (alias) {
      app.config.globalProperties[alias] = component;
    }
  };
  return component as WithInstall<T>;
};

看到这段代码时，我下意识的就看到了app.component()，我想这就是注册一下全局组件，而这个 withInstall 方法，用到的地方几乎全部都在 components/index.ts 文件中，这也就不足为奇了。

后来，我总感觉这个 install 方法名有些熟悉，便百度了一下，发现在自定义插件时，需要用到这个方法。

插件

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。这是vue3官网上介绍的插件

//拥有 `install()` 方法的对象
conat definePlugins = {
    install:(app,option)=>{
        ...
    },
        ...
}
        
//安装函数本身
function definePlugins(app,option){
        ...
}

以上两种方式，都可以通过app.use()方式，注册插件

//后面的 option 是一个对象，选择性传，若传的话，则会被上面方法的第二个参数所接收（option）
const app = createApp({}) app.use(definePlugins, [option])

思考

现在可以知道，Vben这样写的方式，如果之后用了app.use，就注册了一个插件，如果没用，则只是注册了全局组件。

可是如果要全局指令，就用app.directive() 要全局组件，就用app.component() 要全局属性和方法，就用app.config.globalProperties 就可以了，干嘛要用插件呢

我先是百度搜搜插件，都是说npm插件，完全没有头绪，这和我写install方法有啥关系呢。说实话，我想这个问题想了有一天，到晚上时，我发现项目中 app.use() 使用时，注册的插件几乎都是第三方包，我想，也许是自己写了插件，发布到npm上的，然后在多个项目中就不用copy可以复用的组件、指令等等了。

想到这里，我才对知道干嘛要自己写插件，那么，如果我想学得更深一些，我必须要自己写个插件，好吧，那就开始吧！