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><