昨天掘金上看了看微前端的框架,都比较推qiankun和micro-app,然后说micro-app比较简单一点,那试试吧,反正摸鱼也是摸,那就玩一玩。 因为我开发得项目使用vue比较多,对vue更熟悉一点,所以我的这个示例中,主系统和子系统都是vue3+vite,但其实不限制框架的哈。 ok,开干了,一起走进micro-app的demo体验之旅。 相关...
* @FilePath: \microApp_demo\vite_vue3_main\src\components\HeaderNav.vue * @Description: HeaderNav --> <template>
micro-app-demo 介绍 一个微前端的测试实例 软件架构 软件架构说明 安装教程 xxxx xxxx xxxx 使用说明 xxxx xxxx xxxx 参与贡献 Fork 本仓库 新建Feat_xxx 分支 提交代码 新建Pull Request 特技 使用Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md Gitee 官方博客 blog.gitee.com 你可...
micro-app-demo 作为micro-app的案例仓库,举例了react,vue,angular,nextjs,nuxtjs,vite如何作为主应用和子应用接入微前端,并在尽可能改动少量的代码的情况下做出尽可能完善的功能。 micro-app-demo中所有项目都是使用官方脚手架创建的,它们足够精简,你完全可以将其中的demo作为基础进一步开发自己的项目。
micro-app-demo 简介 目录结构 开始 一、搭建主应用 二、搭建子应用 Vue2 参考文档 简介 本项目使用京东的micro-app实现微前端,并使用pnpm和 Monorepo 管理项目代码。想了解 Monorepo 可看看带你了解更全面的 Monorepo - 优劣、踩坑、选型这篇文章。运行环境为 node-16.8.0 + pnpm-7.32.0。
micro-app-demo 作为 micro-app 的案例仓库,举例了 react, vue, angular, nextjs, nuxtjs, vite 如何作为主应用和子应用接入微前端,并在尽可能改动少量的代码的情况下做出尽可能完善的功能。 micro-app-demo中所有项目都是使用官方脚手架创建的,它们足够精简,你完全可以将其中的demo作为基础进一步开发自己的项目。
目录 收起 微前端 MicroApp 快速开始 主应用-React 写在后面 相关内容指北 本篇文章为 MicroApp 的使用初探,您可以选择通过 官方demo 进行对框架全面了解。 微前端 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个...
首先我们先建立一个干净的空文件夹,名字为micro-app-demo,通过VSCode进入这个目录。 主服务my-app的构建 通过脚手架create-react-app创建一个React项目,并启动 AI检测代码解析 npx create-react-app my-app cd my-app npm start 1. 2. 3. 启动成功,可以看到主服务地址http://localhost:3000。
micro-app 在线体验地址:https://zeroing.jd.com/micro-app/demo/react16
MicroApp微前端框架的使用指南分为四个步骤，让入门变得简单易懂。首先，通过官方demo来对框架有个全面的了解，理解微前端如何将Web应用拆分为独立且可独立开发的模块。微前端架构借鉴了WebComponent的思想，利用CustomElement和ShadowDOM实现组件化渲染，这使得MicroApp成为接入成本最低的方案，无需大幅修改子...