上手京东微前端框架micro-app(保姆级教学)

npx create-react-app my-app
cd my-app
npm start

npm i @micro-zoe/micro-app --save

import microApp from '@micro-zoe/micro-app';

microApp.start();

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import microApp from '@micro-zoe/micro-app';

microApp.start();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

npx create-react-app my-app1
cd my-app1
npm start

npm run eject

git add .
git commit -m 'your commit'

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>子服务1 my-app1</h1>
        <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>
  );
}

export default App;

npm install -g @vue/cli

vue create my-app2
cd my-app2
npm run serve

<template>
  <div id="app">
    <h1>子服务2 my-app2</h1>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

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

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': '*',
      'Access-Control-Allow-Headers': '*',
    },
  },
})

<micro-app 
  	name='app1' 
    url='http://localhost:3000/' 
    baseroute='/my-page'
  >
</micro-app

import React from "react";

const Page = () => {
    return (
        <div>
            <h1>主服务 Page</h1>
        </div>
    )
};

export default Page;

import React from "react";

const Page1 = () => {
    return (
        <div>
            <micro-app
                name="my-app1"
                url="http://localhost:3001"
                baseroute="my-app1"
            ></micro-app>
        </div>
    )
};

export default Page1;

import React from "react";

const Page2 = () => {
    return (
        <div>
            <micro-app
                name="my-app2"
                url="http://localhost:8080"
                baseroute="my-app2"
            ></micro-app>
        </div>
    )
};

export default Page2;

npm install react-router-dom --save

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Page from './Page';
import Page1 from './Page1';
import Page2 from './Page2';

export default function AppRoute() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<Page />}>

                </Route>
                <Route path='/my-app1' element={<Page1 />}>

                </Route>
                <Route path='/my-app2' element={<Page2 />}>

                </Route>
            </Routes>
        </BrowserRouter>
    )
}

import './App.css';
import AppRoute from './route';

function App() {
  return (
    <div className="App">
      <AppRoute />
    </div>
  );
}

export default App;