Vite+Vue3+qiankun构建微前端

创建项目准备

我这里使用3个项目来演示本次的微前端DEMO，分别是一个主应用、两个测试子应用。
1、使用pnpm 包管理工具来构建项目

// 使用该命令创建Vue3项目
pnpm create vite

2、额外的依赖包准备

• vue-router 用于应用的路由跳转
• qiankun 本次的主角乾坤，用于构建微前端
• vite-plugin-qiankun-lite 一个简单的 Vite 插件，用于使用 qiankun 高效运行微前端应用程序

// 主应用依赖
pnpm install vue-router  qiankun
// 子应用依赖
pnpm install vite-plugin-qiankun-lite -D

编写主应用的代码

1、编写2个测试页面

1、在src目录下新建views/Home.vue 和 views/About.vue两个文件

• Home.vue 页面代码

<!-- src/views/Home.vue -->
  <template>
    <div >
      <h1>Home Page</h1>
    </div>
  </template>
  
  <script>
  export default {
     
     
    name: 'Home'
  }
  </script>
  

• About.vue 页面代码

<!-- src/views/About.vue -->
  <template>
    <div >
      <h1>About Page</h1>
    </div>
  </template>
  
  <script>
  export default {
     
     
    name: 'About'
  }
  </script>

2、编写router/index.ts 文件

// src/router/index.ts
import {
   
    createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
   
   
    path: '/test1',
    name: 'Home',
    component: Home
  },
  {
   
   
    path: '/test2',
    name: 'About',
    component: About
  }
]

const router = createRouter({
   
   
  history: createWebHistory(),
  routes
})

export default router

3、编写App.vue 文件

<script setup lang="ts">
	console.log('主应用App.vue')
</script>

<template>
  <nav>