从零配置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、启动三个服务,访问及操作效果