第一步安装qiankun yarn add qiankun # 或者 npm i qiankun -S main为主应用,sub-app1,sub-app2为微应用,如下图。 第二步,在主应用入口文件注册微应用 /qiankun-vue/main/main.js import './public-path.js'import { createApp } from'vue'import router from'./router'import store from'./store'...
.创建Vue子应用 vue create qiankun-vue 3.进行主应用(qiankun-base项目)的配置 安装:npm i element-ui qiankun view-design vue-router src目录下创建router.js文件,加入如下代码 import Vue from "vue";//引入vueimport Router from "vue-router";//引入vue-routerimport Home from './components/HelloWorld...
main是主项目,app-vue-hash是hash模式路由的子项目,app-vue-history是history模式路由的子项目 qiankun的开发和打包和正常模式一模一样,它使用一个全局变量__POWERED_BY_QIANKUN__来区分微前端模式和正常模式,不需要额外的配置和代码。 运行和打包 在根目录下: 先安装依赖:npm install,再执行npm run install-all...
router.push(’/main/child1’)router.push(’/main/child2’) 在主应用中切换子应用内部的子路由,发送消息给子应用,让子应用自行切换,参考qiankun官方应用通信样例https://qiankun.umijs.org/zh/api#initglobalstatestate 主应用: import{initGlobalState,MicroAppStateActions}from'qiankun';conststate={path:{...
51CTO博客已为您找到关于qiankun 微服务 VUE的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及qiankun 微服务 VUE问答内容。更多qiankun 微服务 VUE相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。
qiankun引入vue3子项目实践 背景 vue3优点就不再赘述了,反正就是很多(性能优化、优雅使用上ts、Composition API...),最主要的能使用前沿的技术架构,这是每一位技术的执念。 怎么样无感知切换到使用vue3开发成了当前的问题,前段时间有同事提出了可以通过qiankun嵌入,okokok!那就是它了,在我们老项目中通过qiankun...
1、此实例包含有一个qiankun-main主应用和qiankun-vue-child子应用。【可以包含若干个子应用,这里只建立一个vue子应用进行演示】 2、主应用跨域访问子应用系统 3、qiankun-main主应用运行端口8085,qiankun-vue-child子应用运行端口8083。 STEP1:创建主应用【qiankun-main】 ...
首先,我们需要安装qiankun和Vue. 你可以使用以下命令来安装: npminstallqiankun vue 1. 创建Vue 微应用 在/src/vue-app/main.js中,简单创建一个 Vue 应用: importVuefrom'vue';importAppfrom'./App.vue';Vue.config.productionTip=false;newVue({render:h=>h(App),}).$mount('#app'); ...
使用qiankun: 在utils 内创建 微应用文件夹 microApp,同时在该文件夹内创建微应用出口文件 index.js,路由文件 microAppRouter,配置函数文件 microAppSetting。 microApp文件 2.路由文件 microAppRouter // 微应用路由constmicroAppRouter=[{name:"child",//用于应用名 容器id 应用路由基地址url:"//localhost:10002...
qiankun-vue2.0 在你决定 clone 项目的时候,希望你可以帮我点个 ⭐,这将对我是极大的鼓励。 介绍 基于qiankun+vue2.0 技术栈实现的前端微应用架构,实现了动态路由(所有路由均使用 history 模式)、主子应用以及子子应用之间的通信,并做了简单的自动化脚本命令,可用一行命令所有子应用的依赖安装、启动以及打包部署...