微前端的十种实现方式【1】微前端的实现，我想了想，大概有十种方法给想学微前端的朋友，你可以看到我用来分析加载微前端的源码，还有我开源的微前端框架chunchao源码。今天，我就来说说最简单的微前端实现。Vue与React和Jquery联合开发，通信babel配置{"presets":["@babel/preset-react",["@babel/preset-env",{"targets":{"electron":"4"},"modules":false}]],"plugins":["@babel/plugin-proposal-class-properties","@babel/plugin-syntax-async-generators","@babel/plugin-syntax-dynamic-import"]}Jquery兼容性最好，vue和react不相上下，需要一些具体的babel处理，如何实现React的入口我就不详细解释了importReactfrom'react';从“dva”导入dva；从'./App'导入应用程序；从'../App/Dva-model/demo.js'导入演示;constapp=dva();app.model(demo);app.router(({history,app:store})=>());app.start('#root');以React组件为基础，vue为子应用进入一个React组件，然后调用vue渲染定义vue入口文件functionvueRender(props){newVue({router,store,render:(h)=>h(App),}).$mount('#test');}导出默认vueRender;在React组件中调用vue渲染importvueRenderfrom'@v/startVUe.js';...componentDidMount(){vueRender(this.props);}这样vue就可以接收到React组件的props，进而也可以通过vue正常渲染，使用vue技术栈后如何进行数据通信和共享呢？这其实是最简单的。和redux类似，应该是最简单的了。在base中生成state和reducer，或者通过eventbus维护一份Map数据，像dva在props中封装了dispatch，只要reactbase文件connect，就可以获取dispatch，可以调用任意reducer和效果。简单的乞丐版微前端就搞定了，是不是很简单呢？就算是让你写一个微前端框架，其实也很简单，只要你愿意付出努力~小心收藏这个系列，记得关注和观看，相信你能有所收获很多~最后，如果觉得写的不错，关注微信【前端巅峰】我是彼得，20万人设计的一款具有端到端加密超群功能的桌面IM软件。/qianduan.life，感觉对你有帮助，可以点击右下角观看，关注一波公众号：【前峰】
