// 创立外围我的项目 - vuevue create vue-core// 创立vue利用 - vuevue create vue-child// 创立react利用 - reactnpx create-react-app react-child
- 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.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib...' // 款式Vue.use(ElementUI)// 引入qiankunimport { 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 参数apinew Vue({ router, render:h => h(App)}).$mount('#app')
- vue-child
// main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'let instance = nullif(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.jsmodule.exports = { devServer:{ port: 10000, headers:{ 'Access-Control-allow-Origin':'*' } }, configureWebpack:{ output:{ library:'vueApp', libraryTarget:'umd' } }}
- React-child
// 装置重写webpack插件yarn add react-app-rewired -D// 批改package.jsonscript:{ "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.jsimport 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') )}