qiankun项目搭建手册

1. 项目结构

创建一个web-group的文件夹，进入该文件夹创建主项目和子项目。

• 主项目（必须）: main-service（main-service为主项目名称）
• 子项目：sub1-service、sub2-service、…

2. 项目搭建及插件安装

2.1 项目搭建

项目要求：vue3+vite+ts+qiankun

项目搭建命令: npm create vite@latest 项目名 -- --template vue-ts

• 主项目中，安装 qiankun：npm install qiankun

• 子项目中，安装 vite-plugin-qiankun：npm install vite-plugin-qiankun

2.2 插件安装

在主项目中.根据需要安装 vue-router、pinia、pinia-plugin-persistedstate等插件。

npm i vue-router pinia pinia-plugin-persistedstate

3. main.ts文件配置

3.1 主项目的 main.ts 文件配置

import {
    createApp } from 'vue'
import './style.css'
import {
    registerMicroApps } from 'qiankun'
import router from './router'
import pinia from './store'
import App from './App.vue'
const app = createApp(App)
app.use(router).use(pinia).mount('#app')
registerMicroApps([
  {
   
    name: 'sub1-service', // 必选，微应用的名称，微应用之间必须确保唯一。
    entry: '//localhost:3001', // 必选，微应用的入口。
    container: '#subApp',
    // activeRule: '/sub-app/app1', // 必选，微应用的激活规则。
    activeRule: (location: Location) => {
   
      return location.pathname.startsWith('/sub-app/app1')
    },
    loader: (loading: boolean) => {
    // 可选，loading 状态发生变化时会调用的方法。
      console.log(loading, '===loading');
    },
    props: {
   
      router,
    }
  },
  {
   
    name: 'sub2-service', // 必选，微应用的名称，微应用之间必须确保唯一。
    entry: '//localhost:3002', // 必选，微应用的入口。
    container: '#subApp',
    activeRule: (location: Location) => location.pathname.startsWith('/sub-app/app2'), // 必选，微应用的激活规则。
    loader: (loading: boolean) => {
    // 可选，loading 状态发生变化时会调用的方法。
      console.log(loading, '===loading');
    },
    props: {
   
    }
  },
])
// 设置默认路由
// setDefaultMountApp("/sub1")
// 开启qiankun
// start()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

3.2 子项目的 main.ts 文件配置

imp