vue2或vue3实现sdk

Vue2SDK.js

import Vue from 'vue'
// lib模式下，vue的主入口文件
import Lib from './views/Lib.vue'
import 'normalize.css/normalize.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small' })

Vue.config.productionTip = false

class Vue2SDK {
  constructor(option) {
    if (!Vue2SDK.instance) {
      Vue2SDK.renderDom(option)
      Vue2SDK.instance = this
    }
    return Vue2SDK.instance
  }
  // 渲染vue
  static renderDom(option) {
    // 1.创建挂载节点
    // 2.vue挂载
    // 3.接受外部参数
    const { dom, ...restOpt } = option
    const app = new Vue({
      render: (h) =>
        h(Lib, {
          props: restOpt
        })
    })
    if (dom) {
      app.$mount(dom)
    } else {
      const outer = document.createElement('div')
      outer.setAttribute('id', 'Vue2SDK')
      document.body.appendChild(outer)
      app.$mount('#Vue2SDK')
    }
  }
  // 初始化
  static init(option = {}) {
    if (!this.instance) {
      this.instance = new Vue2SDK(option)
    }
    return this.instance
  }
  static test() {
    console.log(666666)
  }
}

export default Vue2SDK

vue3SDK.js

import Lib from './views/Lib.vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'
class Vue3SDK {
  constructor(option) {
    if (!Vue3SDK.instance) {
      Vue3SDK.renderDom(option)
      Vue3SDK.instance = this
    }
    return Vue3SDK.instance
  }
  // 渲染vue
  static renderDom(option) {
    // 1.创建挂载节点
    // 2.vue挂载
    // 3.接受外部参数
    const { dom, ...restOpt } = option
    const app = createApp(Lib, restOpt)
    app.use(createPinia()).use(ElementPlus)
    // 传入dom节点
    // 不传入会挂载在body下
    if (dom) {
      app.mount(dom)
    } else {
      // 1.创建挂载节点
      const outer = document.createElement('div')
      outer.setAttribute('id', 'Vue3SDK')
      document.body.appendChild(outer)
      app.mount('#Vue3SDK')
    }
  }
  // 初始化
  static init(option = {}) {
    if (!this.instance) {
      this.instance = new Vue3SDK(option)
    }
    return this.instance
  }
}

export default Vue3SDK

package.json

  "scripts": {
    "lib": "vue-cli-service build --target lib --inline-vue --name vue2SDK src/Vue2SDK.js"
  }

vue.config.js

module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    output: {
      libraryExport: 'default'
    }
  },
  css: {
    extract: false
  }
}

demo.html

<meta charset="utf-8">
<title>vue2SDK demo</title>
<script src="./vue2SDK.umd.js"></script>

<script>
vue2SDK.init({})
</script>