微前端,从0开始搭建qiankun乾坤微服务

什么是微前端?为什么要用微前端?

微前端:微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。与技术栈无关,团队独立开发,独立部署,微应用之间独立运行

由于前端技术更迭,需要用新技术开发,旧代码不动,用微前端可以解决。如老项目用vue2开发,新项目功能用vue3,在同一个页面下,做到技术隔离。或者同一个页面既有Angular,也有Vue项目。

开始搭建:

1:新建文件夹,在该文件夹下输入,安装乾坤框架

npm install qiankun

2:本次部署,安装3个框架分别是Angular、Vue2、Vue3

安装Angular需要全局安装

npm i -g @angular/cli 

接着输入下面命令,创建一个Demo项目

ng new AngularDemo

 进入AngularDemo目录,输入:

npm i qiankun qiankun-ng-common -S 
// 如果不行用下面的
npm install --legacy-peer-deps

// 最后方案强行安装
npm i qiankun-ng-common@0.0.2 --force

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qiankun 是一个前端框架,可以帮助我们将多个独立的前端应用整合到一个主应用中,实现多个应用的共存和互通。如果你想在 Vue2 的项目中使用 Qiankun,需要按照以下步骤操作: 1. 安装 qiankun: ``` npm install qiankun --save ``` 2. 在主应用中创建一个容器组件: 在主应用中创建一个容器组件,用于渲染子应用的内容。该组件可以使用 `qiankun` 提供的 `VueRender` 组件。 ``` <template> <div> <h1>Vue2 主应用</h1> <div id="subapp-viewport"></div> <vue-render ref="subapp" /> </div> </template> <script> import { VueRender } from 'qiankun' export default { name: 'App', components: { VueRender }, mounted() { // 注册子应用 registerMicroApps([ { name: 'vue2_subapp', entry: 'http://localhost:8081', // 子应用的地址 container: '#subapp-viewport', activeRule: '/subapp' // 子应用的激活规则 } ]) // 启动应用 start() } } </script> ``` 3. 在子应用中添加导出函数: 在子应用的入口文件中,需要导出一个函数,用于初始化子应用。该函数需要返回一个 Promise 对象,用于在子应用加载完成后通知主应用。 ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false // 导出初始化函数 export async function bootstrap() { console.log('Vue2 子应用启动') } export async function mount() { new Vue({ router, render: h => h(App) }).$mount('#app') } export async function unmount() { console.log('Vue2 子应用卸载') } ``` 4. 在子应用中添加 `qiankun` 配置: 在子应用的入口文件中,需要添加 `qiankun` 的配置,用于告诉主应用如何加载子应用。 ``` import { registerMicroApps, start } from 'qiankun' // 注册子应用 registerMicroApps([ { name: 'vue2_subapp', entry: 'http://localhost:8081', // 子应用的地址 container: '#app', // 子应用的容器 activeRule: '/subapp', // 子应用的激活规则 props: {} // 子应用的 props } ]) // 启动应用 start() ``` 5. 启动主应用和子应用: 启动主应用和子应用即可。 以上是在 Vue2 中使用 Qiankun 的简单示例,具体实现还需要根据自身业务进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值