主应用 vue2项目搭建
第一步、创建vue2的项目与正常创建无异,在这里不做过多描述;
第二部、将创建好的vue2项目作为主应用,在根目录先安装qiankung
yarn add qiankun # 或者 npm i qiankun -S
第三步、修改src目录下面的main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue2',
entry: '//localhost:7000',
container: '#container',
activeRule: '/app-vue2',
},
{
name: 'vue3',
entry: '//localhost:7001',
container: '#container',
activeRule: '/app-vue3',
},
]);
start();
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
第四步、在src目录下面的App.vue,提供微应用展示的DOM
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<!--需要与main.js配置的跳转路由一致-->
<router-link to="/app-vue2">app-vue2</router-link> |
<router-link to="/app-vue3">app-vue3</router-link>
</nav>
<router-view/>
<!--微应用在此展示-->
<div id="container"></div>
</div>
</template>
到此为止主应用配置完成
然后开始搭建微应用,在主应用与src同级创建一个examples文件夹用来存放微应用 如图所示
主应用vue3搭建具体流程请查看:主应用vue3 点击跳转
微应用vue2搭建具体流程请查看:微应用vue2 点击跳转
微应用vue3搭建具体流程请查看:微应用vue3 点击跳转