【由于使用了vue create创建vue项目,故需在项目文件夹下手动创建vue.config.js进行配置,下面会讲到】 参考文档:qiankun 官方文档 二、乾坤实例应用 STEP1:前期准备工作【需关注代码注释重点部分】 1. 创建主应用【qiankun-main】 新建主应用。 vue create qiankun-main 1. 创建src/components/father.vue,内容如下...
</template> 第四步,就需要在微应用上做对接了,只在主应用上配置了,微应用不配置也跑不起来 /qiankun-vue/sub-app1/main.js import './public-path.js'import { createApp } from'vue'import App from'./App.vue'import routes from'./router'import { createRouter, createWebHistory } from'vue-ro...
container:"#yourContainer",//子系统要挂载到父页面的容器节点,类似iframe activeRule:"/child-site",//这里要注意的是qiankun没有自己的路由,如果你是react就要借助react-router,如果你是vue就要借助vue-router去实现匹配 }, ]);//预加载子应用start(); 这是路由部分,本处用的是vue-router V4.X: import ...
qiankun引入vue3子项目实践 背景 vue3优点就不再赘述了,反正就是很多(性能优化、优雅使用上ts、Composition API...),最主要的能使用前沿的技术架构,这是每一位技术的执念。 怎么样无感知切换到使用vue3开发成了当前的问题,前段时间有同事提出了可以通过qiankun嵌入,okokok!那就是它了,在我们老项目中通过qiankun...
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'); 1. 2. 3.
1、此实例包含有一个qiankun-main主应用和qiankun-vue-child子应用。【可以包含若干个子应用,这里只建立一个vue子应用进行演示】 2、主应用跨域访问子应用系统 3、qiankun-main主应用运行端口8085,qiankun-vue-child子应用运行端口8083。 STEP1:创建主应用【qiankun-main】 ...
用qiankun来实现vue技术栈的前端微服务 main是主项目,app-vue-hash是hash模式路由的子项目,app-vue-history是history模式路由的子项目 qiankun的开发和打包和正常模式一模一样,它使用一个全局变量__POWERED_BY_QIANKUN__来区分微前端模式和正常模式,不需要额外的配置和代码。
微前端(qiankun)尝鲜(vue) 什么是微前端? Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. –Micro Frontends 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
简介:微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用 一、了解qiankun.js qiankun - qiankun 1.1、简单,任意 js 框架均可使用。微应用接入像使用接入一个iframe系统一样简单,但实际不是 iframe。 1.2、完备,几乎包含所有构建微前端系统时所需要的基本能力,如 样式隔离、js 沙箱、预加载等...
'/micro-vue', // 当访问路由为 /micro-vue 时加载微应用 props: { msg: "我是来自主应用的值-vue" // 主应用向微应用传递参数 } }, { name: 'react-app', entry: 'http://127.0.0.1:5175', container: '#react-app-container', activeRule: '/micro-react', props: { msg: "我是来自主应...