转到 react-core-mf/public 并创建一个名为 app.html 的新文件。 将此代码粘贴到文件中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1" /> <title>React App</title> </head> <body> <div></div> </body> </html> Configure webpack在这一步中，我们配置 webpack 并调整依赖项，以便更轻松地开发和构建应用程序。
修改 react-core-mf/config/webpack-config.js：
加上一行：
const CopyWebpackPlugin = require(\'copy-webpack-plugin\');删除这一行：
const ModuleScopePlugin = require(\'react-dev-utils/ModuleScopePlugin\');以及：
新的 plugin：
new CopyWebpackPlugin( { patterns: [ { context: \'public\', from: \'index.html\', to: \'index.html\' }, { from: \'node_modules/@luigi-project/core\', to: \'./luigi-core\' } ] }, { ignore: [\'.gitkeep\', \'**/.DS_Store\', \'**/Thumbs.db\'], debug: \'warning\' } ), new HtmlWebpackPlugin( { inject: true, template: __dirname + \'/../public/app.html\', filename: \'app.html\' } ), Create Luigi configuration file在这一步中，您将创建一个 Luigi 配置文件。 这是任何 Luigi 应用程序的中心点。 它允许您配置一致的导航和许多其他 Luigi 功能。
react-core-mf/public 目录下面新建一个配置文件：luigi-config.js.
在现实生活中，您可以为配置文件指定任何您想要的名称或创建多个文件。 唯一重要的是使用正确的 Luigi 参数和语法，这将在下一步中介绍。
Configure Luigi for "Home" node借助与导航和常规设置有关的简单参数，您将创建您的第一个“主页”导航节点并使您的应用程序具有响应性。
这些是您将使用的 Luigi 导航参数：
pathSegment - 添加到 URL 的文本段
label - 导航中显示的节点的名称
icon - 标签旁边显示的 SAP 图标
viewUrl - 微前端的 URL
使用下面的代码，您将为您的页面配置标题，并使您的应用程序在移动设备上使用 responseNavigation 参数看起来更好：
/* eslint-disable no-undef */ Luigi.setConfig({ navigation: { nodes: () => [ { pathSegment: \'home\', label: \'Home\', icon: \'home\', viewUrl: \'/app.html#/home\' } ] }, settings: { header: { title: \'Luigi Application\', logo: \'/logo.png\' }, responsiveNavigation: \'simpleMobileOnly\' } } ); Create "Home" view在这一步中，您将使用 React 创建您的第一个微前端（又名视图）。 这是一个带有欢迎信息的简单“主页”视图。
导航到 react-core-mf/src 并创建一个名为 views 的文件夹。
新建一个 Home.jsx 文件：
import React from \'react\'; import { LayoutPanel } from \'fundamental-react\'; export const Home = () => { return ( <LayoutPanel> <LayoutPanel.Body> <h2>Welcome to Luigi - a micro-frontend framework</h2> </LayoutPanel.Body> </LayoutPanel> ); } Configure router for "Home" view在此步骤中，您将对 React 应用程序的入口点 index.js 进行更改。您将为上一步中创建的“主页”视图配置路由器，并导入 Luigi Client。
打开 react-core-mf/src/index.js 并将其内容更改为：
import React, { Component } from \'react\'; import { render } from \'react-dom\'; import { addInitListener } from \'@luigi-project/client\'; import { BrowserRouter as Router, Route } from \'react-router-dom\'; import { Home } from \'./views/Home.jsx\'; import \'./index.css\'; class App extends Component { constructor(props) { super(props); addInitListener(() => { console.log(\'Luigi Client initialized.\'); }); } render() { return ( <Router basename={`/app.html#`}> <Route path="/home" component={Home} /> </Router> ); } } render(<App />, document.getElementById(\'root\')); Create more views with React在这一步中，您将创建更多 React 微前端，包括产品列表和产品详细信息。