本文转载自微信公众号《Gogo的前端世界》，作者西岭。转载本文请联系Gogo前端世界公众号。（一）创建一个基于React的微应用1.创建一个React微应用创建一个应用：create-single-spa，注意组织和项目名称，后面注册微应用会用到：1.在应用目录下进入todos2.选择react修改框架应用端口&&启动应用启动应用：npmstart2。注册应用将React项目的入口文件注册到基础应用（容器应用）\container\src\study-root-config.js：指定微前端应用模块的引用地址：（可以直接访问对应的应用服务器，并有提示URL加载地址）指定公共库的访问地址。默认情况下，应用程序中的react和react-dom不会被webpack打包。single-spa认为是公共库，不应该单独打包。修改默认应用代码，在单独页面显示应用内容container\src\study-root-config.js3，指定应用渲染位置micro\container\src\index.ejsmicro\todos\src\study-todos.js4、React应用代码解析micro\todos\src\study-todos.js5、React微前端路由配置准备两个路由组件micro\todos\src\home.js&μ\todos\src\about.jsmicro\todos\src\root.component.js路由文件已经导入public模块，\micro\container\src\index.ejs修改webpack配置文件排除路由模块打包，micro\todos\webpack.config.js(2)创建一个基于Vue的微应用1.Create创建一个应用：create-single-spa1。用realworld2填充项目文件夹。选择Vue作为框架。生成Vue2项目。因为vue&&vue-router需要通过publicmodules打包，所以需要在application内部不打包的情况下配置micro\realworld\vue.config.js修改项目启动命令：micro\realworld\package.jsonregisterapplication:micro\container\src\study-root-config.jsmicro\container\src\index.ejsloadvue&&vue-routerimportapplication,application直接访问应用后在浏览器的提示中可以获取到地址。2.应用路由配置\micro\realworld\src\main.jsmicro\realworld\src\App.vue(3)创建实用模块1.创建实用程序独立应用程序是为了放置跨应用程序共享的JavaScript逻辑。它也是一个独立的应用程序。需要单独构建和单独启动。1.创建应用程序：create-single-spa1)填写文件夹tools2)为应用程序选择浏览器内实用模块（styleguide、api缓存等）2。在\micro\tools\package.json中修改端口，启动应用，导出公共方法：micro\tools\src\study-tools.js在模板文件中声明应用模块访问地址：micro\container\src\index.ejs2，在React应用中使用该方法MicroFrontends\micro\todos\src\about.js3，在Vue应用中使用该方法micro\realworld\src\main.jsmicro\realworld\src\components\Foo.vue
