vue3.0 创建 乾坤qiankun 微前端

最新推荐文章于 2024-05-08 16:37:15 发布
最新推荐文章于 2024-05-08 16:37:15 发布
阅读量2.4k 收藏 13
点赞数
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60035749/article/details/125187696
版权 
1.前期准备工作
1.1 创建主应用
1) vue 新建主应用
vue create qiankun-main
2) 创建src/components/father.vue
<template>
  <div>恭喜你，看到我了，我是father页面</div>
</template>

<script>
export default {
  name: 'AFather'
}
</script>
<style scoped>

</style>
3) src/router/index.js中添加路由信息
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
{
path: '/',
// redirect 是重定向， 当在 app.vue 点击跳转到父页面 盒子后，路由 配置 /，而  path: '/'设置了重定向
// 重定向最终跳到了 path: '/father' 页面，而path: '/father'页面的组件是 father 页面
redirect: '/Father'
},
{
path: '/father',
name: 'Father',
component: () => import(/* webpackChunkName: "about" */ '@/components/father.vue')
}
]

// 3. 创建路由实例
const router = createRouter({
// 4. 采用hash 模式
// history: createWebHashHistory(),
// 采用 history 模式
history: createWebHistory(),
routes, // short for `routes: routes`
});

export default router
4) 在main.js中引入路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

createApp(App)
.use(router)
.mount('#base-app');
app.vue和index.html 里面根id也要是base-app
1. app.vue
<template>
  <div class="app" id="base-app">
  </div>
</template>
2. index.html
<head>
<div id="base-app"></div>
</head>
5) 在项目根目录下新建vue.config.js，添加内容如下
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
transpileDependencies: true,
devServer: {
// 可以在配置中 配置端口 VUE_APP_PORT = 8080
port: 8080,
headers: {
'Access-Control-Allow-Origin': '*' // 重点1: 允许跨域访问子应用页面
}
},
})
6) 修改app.vue中的内容，如下：
<template>
  <div class="app" id="base-app">
<!--   增加了点击盒子进行路由跳转   -->
    <div><router-link to="/">点击跳转到父页面</router-link></div>
    <hr/>
    <div><router-link to="/vue">点击跳转到子页面</router-link></div>
    <router-view />
    <div id="vue"></div><!-- 重点2：子应用容器 id -->
  </div>
</template>
7) 测试：运行程序后，浏览器打开本地http://localhost:8085/father，能成功显示father.vue页面的内容。结果如下：

 

1.2 创建子应用
  1) 新建子应用
vue create qiankun-vue-child
2) 创建src/views/child.vue，内容如下：
<template>
  <div>
    我是子页面
  </div>
</template>

<script>
export default {
  name: 'AChild',
  props: {
    msg: String
  }
}
</script>
<style scoped>

</style>
3) src/router/index.js中添加路由信息，内容如下：
import {createRouter, createWebHistory} from 'vue-router'

const routes = [
{ path: '/', redirect: '/child' },
{ path: '/child', component: () => import('../views/child') }
]

const router = createRouter({
// 有些时候希望直接启动微应用从而更方便的开发调试，你可以使用这个全局变量来区分当前是否运行在 qiankun 的主应用的上下文中
base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/', // 重点4
history: createWebHistory(), // 重点5
routes
})



export default router
4）在main.js中引入路由，内容如下
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

function render (props = {}) {
const { container } = props
createApp(App)
.use(router)
.mount(container ? container.querySelector('#app') : '#app'); // 为了避免根id#app与其他DOM冲突，需要限制查找范围
}
5）在项目根目录下新建vue.config.js，添加内容如下：
const { defineConfig } = require('@vue/cli-service')
const packageName = require('./package.json').name;

module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8083, // 重点6
headers: { // 重点7：同重点1，允许子应用跨域
'Access-Control-Allow-Origin': '*'
}
},
// 自定义webpack配置
configureWebpack: {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd', // 把子应用打包成 umd 库格式
<!-- 使用jsonpFunction会报错：configuration has an unknown property ‘jsonpFunction
报错原因：**在2020-10-10发布的webpack 5中已将 output.jsonpFunction
更名为 output.chunkLoadingGlobal
-->
//  jsonpFunction: `webpackJsonp_${packageName}`
chunkLoadingGlobal: `webpackJsonp_${packageName}`
}
}
})
6）修改app.vue中的内容，如下：
<template>
  <div class="app">
    我是子应用的内容，写在子应用项目里面的哦
    点击到子页面才能看到我哦
    <router-view/>
  </div>

</template>
  2.乾坤简单配置步骤
  2.1 主应用配置
1) 安装乾坤
$ yarn add qiankun # 或者 npm i qiankun -S
2) 在主应用入口文件src/main.js中注册子应用
import { registerMicroApps, start } from 'qiankun'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

<!--  import qiankun  -->
import { registerMicroApps, start } from 'qiankun'

// 在主应用中注册子应用
registerMicroApps([{
name: 'vue app',
entry: '//localhost:8083', // 重点8：对应重点6
container: '#vue', // 重点9：对应重点2
activeRule: '/vue', // 重点10：对应重点4
props: {
data: 'child子应用'
}
}]
)
// 启动
start()

createApp(App)
.use(router)
.mount('#base-app');
3) 主应用可以给子应用传值。 通过props传递
registerMicroApps([{
name: 'vue app',
entry: '//localhost:8083', // 重点8：对应重点6
container: '#vue', // 重点9：对应重点2
activeRule: '/vue', // 重点10：对应重点4
props: {
data: 'child子应用'
}
}]
)
4) 子应用可以在 main.js 文件夹中的生命周期函数通过props接收数据
/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log('react app bootstraped');
}

/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
// ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));

console.log('乾坤子应用容器加载完成，开始渲染 child')
console.log('props from main mount', props)
render(props)
}

/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {
console.log('现在进入子应用的unmount周期', props)
}


/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props) {
console.log('update props', props);
}
2.2 子应用qiankun的配置
1) 在src目录新增public-path.js，内容如下：
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
2) 在main.js中配置如下：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

function render (props = {}) {
const { container } = props
createApp(App)
.use(router)
.mount(container ? container.querySelector('#app') : '#app'); // 为了避免根id#app与其他DOM冲突，需要限制查找范围
}

if (!window.__POWERED_BY_QIANKUN__) {
render()
}


/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log('react app bootstraped');
}

/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
// ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));

console.log('乾坤子应用容器加载完成，开始渲染 child')
console.log('props from main mount', props)
render(props)
}

/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {

}


/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props) {
console.log('update props', props);
}

说明：子应用的四个周期函数：

bootstrap：bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接
      调用 mount 钩子不会再重复触发 bootstrap。通常我们可以在这里做一些全局变量的初始化，
       比如不会在 unmount 阶段被销毁的应用级别的缓存等。
mount：应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法。
unmount：应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例。
update：可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效。

红豆黄豆小甜豆
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微前端vue项目实战 -- 乾坤qiankun框架 （一）
csl125的博客
04-09 2万+
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 如何使用qiankun搭建基于vue的微前端
vue3 搭建乾坤微服务
m0_59118465的博客
01-08 1251
vue3搭建乾坤微服务
qiankun实现微前端，vue3为主应用，分别引入vue2和vue3微应用
最新发布
weixin_44999830的博客
05-08 380
qiankun实现微前端，vue2和vue3
微前端-qiankun：vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
snowball的博客
03-14 5241
可以对老jQuery项目进行升级，老业务不变，新页面使用vue3，这样就好了，目前没有看到相关的资料，看到一些资料是遇到问题的，比如全局变量丢失等，待研究。1.5、qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用，在易用性及完备性上，绝对是值得信赖的。不要对 iframe 抱有偏见，它也是微前端的一种实现方式，如果页面上无弹窗、无全屏等操作，iframe 也是很好用的。任意 js 框架均可使用。
乾坤qiankun框架搭建 主应用为vue3的项目。
qq_58946831的博客
06-09 1393
乾坤qiankun框架搭建主应用为vue3的项目
vue乾坤微前端项目
yanby921005的博客
11-09 359
修改index.html中的#app。修改vue.config.js配置。
微前端完整vue实例-乾坤【qiankun】
01-16
1.此实例包含有一个`qiankun-main`主应用和`qiankun-vue-child`子应用。【可以包含若干个子应用，这里只建立一个vue子应用进行演示】 2.主应用跨域访问子应用系统。 3.无node_modules，执行npm install即可。 更新...
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
10-20
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
使用vue3.0 创建项目
12-16
vue3创建项目
Vue3.0配置多页面应用
03-17
Vue3.0配置多页面应用源码
配置一个vue3.0项目的完整步骤
11-28
我使用vue3新建项目，对于创建一个项目来说，vue3真的比vue2简单很多。 1.初始化项目 1.1全局安装vue-cli 创建vue项目，首先要确保全局安装了vue命令行工具。 我这边使用yarn而不用npm，因为yarn要比npm好用的多，...
vue3-composition-admin:v基于vue3的管理端模板（Vue3 TS Vuex4 element-plus vue-i18n-next composition-api）vue3-admin vue3-ts-admin
03-20
vue3-composition-admin是一个管理端模板解决方案，它是基于vue3，ts和element-plus，项目都是以composition api风格编写的。 简介 项目的基础版本出自自于源于花裤衩大佬的vue-element-admin。 版本： vue2 + js版本： vue2 + ts版本： typescript vue3发布之后，性能增强，速度vue2的倍数，打包体积都在插入（treeshaking），组成api增加了项目突出性。 项目目的： 学习vue3 + ts 保持composition api风格 在线演示演示地址： : 相关项目 基于该项目 （重新路由案例） 微应用乾坤版本 国内gitee版本 功能 - 用户管理 - 登录（视频背景） - 注销 - 权限验证 - 页面权限 - 指令权限 - 权限配置 - 二步登录 -
qiankun乾坤快速简单完整的微前端解决方案
08-08
qiankun（乾坤）
vue3+qiankun项目搭建
前端啤酒屋
11-22 626
vue3+qiankun项目搭建
基于Vue-cli3.0的qiankun（乾坤）前端微服务说明
热门推荐
qq_37682086的博客
12-21 1万+
基于Vue-cli3.0的qiankun（乾坤）前端微服务说明 官方文档地址：qiankun.umijs.org/zh ##主服务 ###1.安装乾坤依赖(子服务不需要安装，只需要暴露生命周期方法) ###2.在入口文件js中添加如下代码 import {registerMicroApps, start} from "qiankun"; let microProject = [ { //项目名称，应当与子服务中的package.json项目名称一致 name: 'wdcsLogin ap
vue微前端qiankun框架学习到项目实战,基座登录共享
qq_42696432的博客
09-22 3828
技术无关，独立开发，独立部署，增量升级，独立运行，微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。
qiankun在主应用、子应用均为vue3+vite+typescript中的使用
m0_37653407的博客
06-08 3558
微前端，qiankun在主应用、子应用均为vue3+vite+typescript中的使用
vite+vue3主应用，vue-cli+vue3为子应用引入乾坤js（qiankunjs）
You Jump,I Jump.
04-05 990
vue3使用乾坤JS，vite作为主应用。
vue3.0创建项目
07-29
要在Vue 3.0中创建一个项目，你需要先安装Vue CLI。以下是创建Vue 3.0项目的步骤： 1. 首先，确保你已经安装了Node.js和npm。你可以在命令行中运行以下命令来检查它们的版本： ``` node -v npm -v ``` 2. 安装Vue ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值