Vite+Vue3+qiankun构建微前端
构建微前端DEMO——步骤
- 创建项目准备
- 编写主应用的代码
- 1、编写2个测试页面
- 2、编写`router/index.ts` 文件
- 3、编写`App.vue` 文件
- 4、编写`main.ts` 文件
- 编写子应用TEST1的代码
- 1、编写`vite.config.ts`文件
- 2、编写`main.ts`文件
- 编写子应用TEST2的代码
- 1、编写`vite.config.ts`文件
- 2、编写`main.ts`文件
- 启动项目查看效果
创建项目准备
我这里使用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><