主应用 vue3项目搭建
第一步、创建vue3的项目与正常创建项目无异,在这里不做过多描述;
第二部、将创建好的vue3项目作为主应用,在根目录先安装qiankung
yarn add qiankun # 或者 npm i qiankun -S
第三步、修改src目录下面的main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
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();
createApp(App).use(store).use(router).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文件夹用来存放微应用 如图所示
![微应用都放在这个文件下](https://i-blog.csdnimg.cn/blog_migrate/37a9ee926591cbe5f5996b901ea1a73b.png)
主应用vue2搭建具体流程请查看:主应用vue2 点击跳转
微应用vue2搭建具体流程请查看:微应用vue2 点击跳转
微应用vue3搭建具体流程请查看:微应用vue3 点击跳转