关于javascript:实现-vuereact-混合开发项目步骤微前端

// 创立外围我的项目 - vue
vue create vue-core
// 创立 vue 利用 - vue
vue create vue-child
// 创立 react 利用 - react
npx create-react-app react-child

1. in vue-core

// 在 app.vue 文件中
<el-menu :router="true" mode="horizontal">
  <el-menu-item index="/">HOME</el-menu-item>
  <el-menu-item index="/vue">VUE 利用 </el-menu-item>
  <el-menu-item index="/react">React 利用 </el-menu-item>
</el-menu>

<router-view to="/">HOME</router-view> // 默认的
<div id="vue"></div> // vue 我的项目
<div id="react"></div> // react 我的项目 

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib...' // 款式
Vue.use(ElementUI)
// 引入 qiankun
import {registerMicroApps, start} from 'qiankun'
const apps = [
    {
    name: 'vueapp',
    entry:'//localhost:10000', // 默认加载这个 html 解析外面的 js 动静执行 子利用必须反对跨域
    container:'#app',
    activeRule:'/vue',
    props:{a:1}
  },
  {
    name: 'reactapp',
    entry:'//localhost:20000', // 默认加载这个 html 解析外面的 js 动静执行 子利用必须反对跨域
    container:'#react',
    activeRule:'/react'
  }
]
registerMicroApps(apps)  
const options = {}
start(options) // options 参数 api

new Vue({
  router,
  render:h => h(App)
}).$mount('#app')

2. vue-child

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

let instance = null
if(window.__POWERED_BY_QIANKUN__){__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__}
if (!window.__POWERED_BY_QIANKUN__) {render();
}
export async function bootstrap(props){}
export async function mount(props){render(props)
}
export async function unmount(props){instance.$destroy()
}

function render(props){
  instance = new Vue({
    router,
    render:h => h(App)
  }).$mount('#app')
}

// vue.config.js
module.exports = {
    devServer:{
        port: 10000,
        headers:{'Access-Control-allow-Origin':'*'}
    },
    configureWebpack:{
        output:{
            library:'vueApp',
      libraryTarget:'umd'
        }
    }
}

3. React-child

// 装置重写 webpack 插件
yarn add react-app-rewired -D
// 批改 package.json
script:{
    "start":"react-app-rewired start",
    "build":"react-app-rewired build",
    "test":"react-app-rewired test",
    "eject":"react-app-rewired eject",
}

// 创立 config-overrides.js 重写文件
module.exports = {webpack:(config) => {
    config.output.library = 'reactApp'
    config.output.libraryTarget = 'umd'
    config.output.publicPath = 'http://localhost:2000/'
    return config
  }
    devServer:(configFunction) => {return function(proxy, allowedHost){const config = configFunction(proxy, allowedHost)
      config.port = 20000
      config.headers = {'Access-Control-allow-Origin':'*'}
      return config
    }
  }
}

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

if (!window.__POWERED_BY_QIANKUN__) {render();
}
export async function bootstrap(){}
export async function mount(){render(props)
}
export async function unmount(){ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}

function render(){
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  )
}