vue3+ts 封装插件

我们为什么要封装插件？

背景：

在我们编写代码中，会遇到某功能在同一个项目中多次使用的场景，在多个项目时，会遇到A项目的一个功能也可以嫁接到B项目,C项目的时候 我们就可以封装插件

过程：

封装插件和封装组件的方法大同小异几乎无差别

原理：插件 | Vue.js

1：

首先将components中的某个组件抽离到项目（src）外，如图，node_modules的同一级

2：将你的所有组件均写到packages/components下

3：编写index.ts（此处有几个组件就引入几个组件）

import demo1 from './components/demo1.vue'


const myPlugin = {
    install(app:any) {
        app.component('demo1',demo1)
      // 配置此应用
    }
  }
  export default myPlugin;

4：挂载到你的项目中

const app = createApp(App)
import myPlugin from '../packages/index'
app.use(myPlugin);

5：使用：在使用时需要注意 不时是<myPlugin/>  而是你组件的名字    <demo1></demo1>

6：注意：在vue3+ts的环境下引入src外的项目可能会报错（目录不在项目的文件列表中,项目必须列出所有文件,或使用“include“模式）   找到  tsconfig.app.json 这个文件夹 改动include加入packages/**/*"应该就能搞定了

小提示：vite的小坑，，引入文件时 严格大小写，写错了不会报错 可以正常使用  但是热更新可能会失效（99%）