wujie无界微前端基础应用

超简单

npm install wujie -S

# vue2 框架
npm i wujie-vue2 -S
import WujieVue from "wujie-vue2";
Vue.use(WujieVue);

# vue3 框架
npm i wujie-vue3 -S
import WujieVue from "wujie-vue3";
app.use(WujieVue);

引用js文件--wujieFiles.js

const lifecycles = {
  beforeLoad: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeLoad 生命周期`),
  beforeMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeMount 生命周期`),
  afterMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterMount 生命周期`),
  beforeUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeUnmount 生命周期`),
  afterUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterUnmount 生命周期`),
  activated: (appWindow) => console.log(`${appWindow.__WUJIE.id} activated 生命周期`),
  deactivated: (appWindow) => console.log(`${appWindow.__WUJIE.id} deactivated 生命周期`),
  loadError: (url, e) => console.log(`${url} 加载失败`, e)
}

function fetch(url, options) {
  return window.fetch(url, { ...options, credentials: 'omit' })
}

const map = {
  '//localhost:8080/': '//wujie-micro.github.io/doc/api/preloadApp.html'
  // '//localhost:8081/': '//wujie-micro.github.io/demo-vue2/',
}
function hostMap(host) {
  return map[host]
}

const props = {
  jump: (name) => {
    router.push({ name })
  }
}
const degrade =
  window.localStorage.getItem('degrade') === 'true' ||
  !window.Proxy ||
  !window.CustomElementRegistry

const isProduction = process.env.NODE_ENV === 'production'
const attrs = isProduction ? { src: hostMap('//localhost:8080/') } : {}

export { fetch, hostMap, lifecycles, degrade, props, attrs }

main.js

import WujieVue from 'wujie-vue2'
import { fetch, hostMap, lifecycles, degrade, props, attrs } from './wujieFiles'

const { setupApp } = WujieVue
Vue.use(WujieVue)
setupApp({
  name: 'DataVisual', // 数据洞察
  url: hostMap('//localhost:7200/'),
  attrs,
  exec: true,
  props,
  fetch: fetch,
  degrade,
  ...lifecycles
})

父应用使用

html

<WujieVue width="100%" height="100% " name="DataVisual" :url="vue2Url" :sync="true"></WujieVue>

js

import { hostMap } from '@/wujieFiles.js'
data() {
    return {
      vue2Url: hostMap('//localhost:8080/')
    }
  },

这样就把其他的网页加在页面上了