微前端qiankun

JavaScript029

微前端qiankun,第1张

微前端qiankun 使用,一些注意事项。附上 qiankun官网

主应用(vue)

1、安装qiankun

2、修改 main.js

主应用到这就可以了,下面的是一些扩展加载微应用事项

3、router页面配置加载微应用

修改主应用router.js

在About.vue文件中加入

4、如果在vue-admin模板中使用乾坤,需要注意的是:

<div id="container"></div>不能写在页面中,只能写在Appmain.vue 中,

路由需要配置重定向

判断改变路由(这里可写配置文件,偷懒就写死了)

AppMain.vue,需要判断显示的是哪个微应用,改变其id显示

微应用(vue)

1、在 src 目录新增 public-path.js:

2、 main.js 修改。

3、打包配置修改(vue.config.js):

微应用(react)

1、在 src 目录新增 public-path.js:

2、设置 history 模式路由的 base:

3、 index.js 修改

4、webpack 配置

安装插件 @rescripts/cli。

根目录新增 .rescriptsrc.js:

修改 package.json:

先获取元素style属性中的CSS样式

getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象(objectCSSStyleDeclaration) getComputedStyle 方法获取的是最终应用在元素上的所有CSS属性对象(包括默认),而element.style只能获取元素style属性中的CSS样式。