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 子应用
vup add my-vue-sub-app
# 在另一个终端启动子应用
cd apps/my-vue-sub-app
pnpm dev子应用将在 http://localhost:9301 运行
访问微前端
访问 http://localhost:9307/auto/vue/ 查看微前端效果
项目结构
apps/my-main-app/
├── src/
│ ├── views/
│ │ ├── Index.vue # 首页
│ │ ├── auto/ # 自动加载示例页面
│ │ │ └── Auto.vue # 微应用容器组件
│ │ └── manual/ # 手动加载示例页面
│ │ └── Manual.vue # 手动加载容器组件
│ ├── router/ # 路由配置
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── index.html # HTML 模板
├── demo.html # 微前端演示入口
├── auto-imports.d.ts # 自动导入类型声明
├── package.json # 项目配置
└── vite.config.js # Vite 配置核心特性
微前端架构
vue
<!-- src/views/auto/Auto.vue -->
<script setup lang="ts"></script>
<template>
<section class="p-6 space-y-4">
<header>
<h1 class="text-xl font-semibold">自动加载示例</h1>
</header>
<div
id="auto-app-container"
class="min-h-[400px] rounded border border-dashed border-gray-300 bg-white"
></div>
</section>
</template>路由管理
主应用根据路由自动加载微应用：
typescript
// src/main.ts
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'my-vue-sub-app',
entry: 'http://localhost:9301',
container: '#auto-app-container',
activeRule: '/auto/vue',
props: {
name: 'my-vue-sub-app-auto',
baseRoute: '/auto/vue',
container: '#auto-app-container',
},
},
]);
start();全局状态管理
主应用使用 qiankun 的全局状态管理功能：
typescript
// main.ts
import { initGlobalState } from 'qiankun';
const state = { name: 'qiankun-template' };
const actions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
console.log('状态变化:', state, prev);
});
actions.setGlobalState(state);开发工具
Vite 配置
javascript
// vite.config.js
import path from 'node:path';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import AutoImport from 'unplugin-auto-import/vite';
import { defineConfig, mergeConfig } from 'vite';
export default mergeConfig(
defineConfig({
plugins: [
vue(),
vueJsx(),
AutoImport({
imports: ['vue', 'vue-router', 'pinia', 'vue-i18n'],
dts: path.resolve(__dirname, 'auto-imports.d.ts'),
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@_shared': path.resolve(__dirname, '../../_shared'),
},
},
})
);Auto Import 配置
javascript
// vite.config.js（片段）
AutoImport({
imports: ['vue', 'vue-router', 'pinia', 'vue-i18n'],
dts: path.resolve(__dirname, 'auto-imports.d.ts'),
vueTemplate: true,
eslintrc: {
enabled: true,
filepath: path.resolve(__dirname, './.eslintrc-auto-import.json'),
globalsPropValue: true,
},
});可用脚本
json
{
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"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}\""
}
}测试微前端
使用你的 Vue 子应用进行测试。请确保同时启动子应用：
bash
# 启动子应用
cd apps/my-vue-sub-app
pnpm dev子应用将在 http://localhost:9301 运行
部署
构建生产版本
bash
# 构建主应用
(cd apps/my-main-app && pnpm build)
# 构建子应用
(cd apps/my-vue-sub-app && pnpm build)部署到 Vercel
微前端应用可以部署到 Vercel。详细的部署配置和步骤请参考 Vercel 部署指南。