微前端学习分享2 qiankun 的前端微服务之旅

话不多说  先给 喜欢自学看API的小伙伴 来一发链接 介绍 - qiankun 这个是qiankun的说明以及API教程 

其实没哟大家想的那么复杂  就像ifream一样简单 

下面GO GO GO

首先分别创建我们的 项目基座 和 子项目   在这里我分别创建了 qiankun-base  qiankun-vue qiankun-react 三个基础的前端项目

直接用vue 和react的官方脚手架创建即可

vue create qiankun-base  然后 install 或者add    qiankun

vue create qiankun-vue

npx create-reacte-app qiankun-react

(如果嫌弃麻烦后面我会附上我的源代码 )

为了美观 创建结束后  在基座应用中 引用一下 element-ui 然后 上代码 

基座的app.vue这里就是简单的配置了一个项目路由的显示

<template>
  <div>
    <el-menu :router="true"
             mode="horizontal">
      <!-- 基座内不可以放自己的路由 -->
      <el-menu-item index="/">Home</el-menu-item>

      <!-- 引用vue子路由 -->
      <el-menu-item index="/vue">vue应用</el-menu-item>

      <!-- 引用react子路由 -->
      <el-menu-item index="/react">react应用</el-menu-item>
    </el-menu>
    <router-view></router-view>
    <div id="vue"></div>
    <div id="react"></div>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

然后再main,js中正式注册子项目 详细代码意义 的内容代码里做了注释

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { registerMicroApps, start } from 'qiankun'

// Vue.config.productionTip = false

const apps = [
  {
    name: 'vueApp', // 应用名
    entry: 'http://localhost:8081/', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）
    // fetch
    container: '#vue', // 容器
    activeRule: '/vue' // 激活路由
  },
  {
    name: 'reactApp',
    entry: 'http://localhost:8082/', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）
    // fetch
    container: '#react',
    activeRule: '/react'
  }
]
registerMicroApps(apps, {
  // beforeMount()
  // beforeUnmount()
}) //注册app +生命周期
start({
  prefetch: false // 取消预加载
}) // 启动
Vue.use(Elementui)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这里的registerMicroApps 和start 都是qiankun内部的注册方法 我就没有过多的注释详细的内容讲解可以 查看官方的API文档

其中也可以加一些app生命周期的操作

到这里其实基座的准备已经结束了  其实基座的作用就是承接一个子应用的一个挂载  至于内部的样式隔离 js 隔离qiankun在挂载的时候已经做了处理 在这里就不需要我们另外处理了

接下来我们修改我们的子应用

main.js

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

// Vue.config.productionTip = false

let instance = null
function render (props) {
  instance = new Vue({
    router,
    //store:[],
    render: h => h(App)
    // props:{}
  }).$mount('#app') // 挂在到自己的HTML中 基座中会拿到这个挂载好的最终html 将其插入
}

if (window.__POWERED_BY_QIANKUN__) { // 判断是否为 qiankun挂载 不是的话自行启动挂载
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
} else {
  render();
}
// export const mount = async () => render();

// 子组件的渲染
export async function bootstrap (props) { };

export async function mount (props) {
  render(props)
};

export async function unmount (props) {
  instance.$destroy()
};

这里面有几个变量是qiankun的内置API变量  和几个挂载方法  不了解了的可以看我上一章的介绍 这里的render的判断条件 是为了区分独立运行和注入两种状态

然后配置我们的vue.config.js

module.exports = {
  devServer: {
    port: 8081,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  configureWebpack: {
    output: {
      library: 'vueApp',
      libraryTarget: 'umd'
    }
  }
}

设置准许所有人访问  和导出模式 这个上一掌也有相应的讲解 这样我们的vue子应用就配置完成了

react 其实也是大同小异 但是为了改变react 默认的配置 我们需要安装一个插件 react-app-rewired 

然后改变package.json配置

"scripts": {
    "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 = '//localhost:8082'
    return config
  },
  devServer: (configFunction) => {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost)
      config.headers = {
        "Access-Control-Allow-Origin": '*'
      }
      return config
    }
  }
}

内容跟vue 基本一致

修改index.js
 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import * as serviceWorker from './serviceWorker';

function render () {
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
}
if (!window.__POWERED_BY_QIANKUN__) { // 判断是否为 qiankun挂载 不是的话自行启动挂载
  render();
}
// export const mount = async () => render();

// 子组件的渲染
export async function bootstrap (props) { };

export async function mount (props) {
  render(props)
};

export async function unmount (props) {
  ReactDOM.unmountComponentAtNode(document.getElementById('root'))
};

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();

新建一个.env文件配置一下自己的启动端口

PORT=8082
WDS_SOCKET_PORT=8082

最后app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Route, Link } from 'react-router-dom'

function App () {
  return (
    <BrowserRouter basename="/react">
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      <Route path="/" exact render={() => (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
          </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
          </a>
          </header>
        </div>
      )}></Route>
      <Route path="/about" exact render={() => (
        <div>about页面</div>
      )}></Route>
    </BrowserRouter>
  );
}

export default App;

这样我们的开发步骤基本就结束了

接下来看成果

bingo 这就是最终效果 虽然丑了点好歹是实现了 也算是收获满满如果没有实现效果的小伙伴可以下载我的源码 对比一下差别

内涵qianku前端微服务项目以及vue和react子项目源码_qiankun子项目-Web开发文档类资源-CSDN下载