qiankun practice

235 阅读2分钟

If you want to know what is the QianKun,I suggest you read the article...

First,you need to prepare three applications.I will use vue2 examples to show you how to build micro front-end applications.

Before that,I hope you can read the official website first.Have a good time studying it!

As the article is too long,I will use Chinese to describe it next.If you don't understand Chinese,I think you need to learn it first.

1.首先你需要像我一样创建三个简单的vue2项目,选择vue2的预设就行,仓库、路由啥的我这里没用到不需要,实际做项目时根据你实际需要来。

vue create microapp (你想取啥名取啥,但是记得要区分开来,特别主应用,实际开发中不要以123来命名噢)

image.png

2.接下来你需要参考qiankun的官网配置一下主应用和微应用:qiankun

这是我配的主应用的配置,官网都有: image.png

这是我配的微应用的配置,官网也有: image.png

除了这些,微应用还要配置webpack的配置:

image.png

我是照着官网瞎配的,仅供参考,所有的微应用都这样配置,细微处区分一下就好了!

3.到这里为止,你就能快速上手一个微前端应用了,当然他是不限技术栈的,主应用、微应用都不限制,你可以用react、vue2、vue3;噢当然微应用先别用vite构建,还没做很好的支持,主应用可以!

4,接下来我们需要对这个微前端应用做下原理分析,当然你可以去看一下前几天我推的这位b站站主的视频,讲的特别详细,细微处我做了一些变更,没有提到的内容我也补充了,如果有需要你可以拉取我的代码研究一下。

qiankun中的api使用原理分析:

image.png

最后的成果图是这样的:(简单绘制了一下,有兴趣的可以自动动手实践一下噢)

image.png

image.png

特别声明:本文所用到的资源来自该b站主以及qiankun,本人只享有著作权,如有侵权,请联系删除!