0
点赞
收藏
分享

微信扫一扫

Spring IoC&DI

菜菜捞捞 2024-06-05 阅读 21
前端

从零配置qiankun微前端框架,会逐步完善更丰富的功能。

2024-06-04

基础配置,开发环境启动实现微前端效果

gitee地址:基于vue2的qiankun微前端基础项目库: 基于vue2的qiankun微前端基础项目库

1、使用vue-cli构建三个vue2项目,分别为app-admin、app-shop、app-pay,其中app-admin是主应用基座,app-shop和app-pay是子应用。

2、主应用配置

2.1 安装qiankun依赖

2.2 src资源文件下创建qiankun文件夹,添加app.js、index.js、IndexView.vue三个文件,具体代码:

app.js

 2.3 在src下创建router文件夹,在router文件夹下创建index.js文件

2.4 在src下创建store文件夹,暂未使用

2.5 在src下创建views文件夹,新建HomeView.vue文件,用来作为主应用首页

2.6 App.vue文件调整

 2.7 main.js 文件调整

2.8 vue.config.js 调整,如果没有此文件则创建即可。

3 、子应用配置

子应用无需安装qiankun依赖

3.1 src下创建router文件夹,router文件夹下 创建index.js

3.2 src下创建store文件夹,暂未用到

3.3 src下创建views文件夹,views文件夹下创建HomeView.vue作为子应用的首页

3.4 App.vue

3.5 main.js 文件修改

3.6 src文件夹下添加public-path.js文件 

3.7 package.json添加配置

文件整体内容如下: 

3.8  vue.config.js文件修改,如果没有则创建

4.9 另一个子应用也如此修改。

5、启动三个服务,访问及操作效果

 

举报

相关推荐

0 条评论