Qiankun 微前端模板
基于 qiankun + Vue 3 + TypeScript + Vite 的现代化微前端开发模板，开箱即用，让你快速构建微前端应用。
技术栈
- Qiankun - 生产级的微前端解决方案
- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - JavaScript 的超集，提供类型安全
- Vite - 下一代前端构建工具
- Vue Router - Vue.js 官方路由管理器
- Pinia - Vue 3 官方状态管理库
- Vue i18n - Vue.js 国际化插件
- Tailwind CSS - 实用优先的 CSS 框架
- SCSS - CSS 预处理器，增强样式编写能力
快速开始
创建项目
bash
# 初始化项目
vup init my-project
# 进入项目目录
cd my-project
# 添加 Qiankun 主应用
vup add my-main-app开发
bash
# 安装依赖
pnpm install
# 启动主应用
cd apps/my-main-app
pnpm dev主应用将在 http://localhost:9307 启动
启动子应用
bash
# 在另一个终端启动子应用（使用 vue-template）
cd apps/vue-template
pnpm dev子应用将在 http://localhost:9301 运行
访问微前端
访问 http://localhost:9307/auto/vue/ 查看微前端效果
项目结构
apps/my-main-app/
├── src/
│ ├── views/
│ │ ├── auto/ &自动加载示例页面
│ │ │ └── Auto.vue # 微应用容器组件
│ │ └── manual/ # 手动加载示例页面
│ │ └── Manual.vue # 手动加载容器组件
│ ├── router/ # 路由配置
│ ├── App.vue # 根组件
│ └最初的 main.ts # 入口文件
├── index.html # HTML 模板
├── package.json # 项目配置
└── vite.config.js # Vite 配置builder核心特性
微前端架构
vue
<!-- views/auto/Auto.vue -->
<template>
<div class="micro-container">
<div class="header">
<h1>主应用</h1>
</div>
<div id="micro-app-container"></div>
</div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { loadMicroApp, MicroApp } from 'qiankun';
let microApp: MicroApp | null = null;
onMounted(() => {
microApp = loadMicroApp({
name: 'vue-sub-app',
entry: '//localhost:9301',
container: '#micro-app-container',
});
});
onUnmounted(() => {
microApp?.unmount();
});
</script>路由管理
主应用根据路由自动加载微应用：
typescript
// router/index.ts
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue-sub-app',
entry: '//localhost:9301',
container: '#subapp-viewport',
activeRule: '/auto/vue',
},
]);
start({
sandbox: {
experimentalStyleIsolation: true,
},
});全局状态管理
主应用使用 qiankun 的全局状态管理功能：
typescript
// main.ts
import { initGlobalState } from 'qiankun';
const state = { name: 'qiankun-template' };
const actions = initGlobalState(state);
// 子应用中
props.onGlobalStateChange((state, prev) => {
console.log('状态变化:', state, prev);
});生命周期管理
子应用需要支持 qiankun 的生命周期函数：
typescript
// 子应用生命周期
export async function bootstrap() {
console.log('子应用启动');
}
export async function mount(props) {
console.log('子应用挂载', props);
// 挂载子应用
}
export async function unmount() {
console.log('子应用卸载');
// 清理资源
}开发工具
Vite 配置
javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import qiankun from 'vite-plugin-qiankun';
export default defineConfig({
plugins: [vue(), qiankun('main-app', { useDevMode: true })],
server: {
host: '0.0.0.0',
port: 9307,
cors: true,
},
});TypeScript 配置
json
// tsconfig.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./.output",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@shared/*": ["../../_shared/*"]
}
},
"include": ["src/**/*", "src/**/*.vue", "./auto-imports.d.ts"]
}可用脚本
json
{
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && vite build",
"lint": "eslint src/ --ext .vue,.ts,.js",
"lint:fix": "eslint src/ --ext .vue,.ts,.js --fix",
"format": "prettier --write \"src/**/*.{js,ts,vue,json,css,scss}\"",
"format:check": "prettier --check \"src/**/*.{js,ts,vue,json,css,scss}\""
}
}最佳实践
子应用开发
- 使用由
vite-plugin-qiankun插件简化配置 - 支持独立运行和微应用运行
- 正确处理生命周期函数
- 实现样式隔离
主应用开发
- 合理规划微应用的路由规则
- 实现全局状态管理
- 处理微应用间的通信
- 监控微应用的生命周期
部署策略
- 主应用和子应用可以独立部署
- 使用 CDN 加速静态资源
- 实现版本管理和回滚机制
测试微前端
本模板使用 vue-template 作为子应用进行测试。请确保同时启动子应用：
bash
# 在项目根目录下
cd apps/vue-template
pnpm dev子应用将在 http://localhost:9301 运行
部署
构建生产版本
bash
# 构建主应用
cd apps/my-main-app
pnpm build
# 构建子应用
cd apps/vue-template
pnpm build部署到 Vercel
微前端应用可以部署到 Vercel。详细的部署配置和步骤请参考 Vercel 部署指南。