代码实践片段/实用思路的实现

codeGist

- windowVueCode.txt Vue项目使用 `window.` 的形式异步声明组件

v3Plugin.ts

/**
 * vue3 中template使用全局方法的方式
 */

import { inject, App } from 'vue'

const cdnKey: string = 'cdn'

export type CdnFunc = (path: string) => string

function cdnFunc(path: string): string {
  return `https://cdn.baidu.com${path}`
}

const plugin = {
  install(app: App) {
    // cdn
    app.config.globalProperties.$cdn = cdnFunc
    console.log('install');
    
    app.provide(cdnKey, cdnFunc)
  }
}

export const useCdn = (): CdnFunc => {
  // 使templates内可以使用 $cdn
  return inject(cdnKey)!
}

export default plugin

/**
  * 使用方法(template内使用)：
    // main.ts
    app.use(plugin)

    // Hello.vue
    <template>
      <div>{{ $cdn('/logo.png') }}</div>
    </template>

    // 使用方法(script内使用)：
    import { useCdn } from '../plugins'
    const cdn = useCdn()
    console.log(cdn('temp.dd'));
*/

windowVueCode.txt

// 通过加载到的组件脚本获得的全局对象创建vue对象 window['image_1.0.3'] load组件脚本运行后会生成的对象
var component = Vue.extend( window['image_1.0.3']) 
// 遍历所有加入的脚本混合组件对象中
nodeInfo.script.forEach((value)=>{
    component =component.extent(value)
})
// 以节点id为key，注册最终组件对象
Vue.component(nodeInfo.id,component)
// 修改该节点的动态组件 :is 参数为 该节点id
// done

作者：满帮大前端
链接：https://juejin.cn/post/6844903701874737160
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。