VUP

English

简体中文

English

简体中文

Appearance

Qiankun Micro-Frontend Template ​

The Qiankun template provides a micro-frontend architecture built with qiankun, Vue 3, TypeScript, and Vite. It's perfect for building large-scale applications with multiple teams working on different parts.

Technical Stack ​

  • Qiankun - Production-ready micro-frontend framework
  • Vue 3 - Progressive JavaScript framework
  • TypeScript - Type-safe development
  • Vite - Fast build tool and dev server
  • Vue Router - Official routing library
  • Pinia - State management library
  • Vue i18n - Internationalization
  • Tailwind CSS - Utility-first CSS framework
  • SCSS - CSS preprocessor

Quick Start ​

1. Create Project ​

bash
# Initialize project
vup init my-project
cd my-project

# Add Qiankun template
vup add my-main-app

2. Install Dependencies ​

bash
# Install dependencies
pnpm install

3. Start Development ​

bash
# Start main application
cd apps/my-main-app
pnpm dev

The main application will be available at http://localhost:9307.

4. Start Sub-Application ​

bash
# In another terminal, start the sub-application (vue-template)
cd apps/vue-template
pnpm dev

The sub-application will be available at http://localhost:9301.

5. Access Micro-Frontend ​

Visit http://localhost:9307/auto/vue/ to see the micro-frontend in action.

Project Structure ​

apps/my-main-app/
├── src/
│   ├── views/
│   │   ├── auto/              # Auto-loading micro-app container
│   │   │   └── Auto.vue      # Micro-app container component
│   │   └── manual/            # Manual-loading micro-app container
│   │       └── Manual.vue    # Manual-loading container component
│   ├── router/                # Vue Router configuration
│   ├── App.vue               # Root component
│   └── main.ts               # Application entry point
├── index.html                # HTML template
├── package.json              # Dependencies and scripts
└── vite.config.js            # Vite configuration

Core Features ​

Micro-Frontend Architecture ​

vue
<!-- views/auto/Auto.vue -->
<template>
  <div class="micro-container">
    <div class="header">
      <h1>Main Application</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>

Route-Based Micro-App Loading ​

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,
  },
});

Global State Management ​

typescript
// main.ts
import { initGlobalState } from 'qiankun';

const state = { name: 'qiankun-template' };
const actions = initGlobalState(state);

// In sub-application
props.onGlobalStateChange((state, prev) => {
  console.log('Global state changed:', state, prev);
});

Lifecycle Management ​

typescript
// Sub-application lifecycle
export async function bootstrap() {
  console.log('Micro-app bootstrap');
}

export async function mount(props) {
  console.log('Micro-app mount', props);
  // Mount sub-application
}

export async function unmount() {
  console.log('Micro-app unmount');
  // Cleanup
}

Development Tools ​

Vite Configuration ​

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

json
// tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./.output",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@shared/*": ["../../_shared/*"]
    }
  },
  "include": ["src/**/*", "src/**/*.vue", "./auto-imports.d.ts"]
}

Available Scripts ​

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}\""
  }
}

Best Practices ​

Sub-Application Development ​

  • Use vite-plugin-qiankun plugin for simplified configuration
  • Support both standalone and micro-app modes
  • Properly implement lifecycle functions
  • Implement style isolation

Main Application Development ​

  • Plan micro-app routing rules properly
  • Implement global state management
  • Handle communication between micro-apps
  • Monitor micro-app lifecycles

Deployment Strategy ​

  • Main and sub-applications can be deployed independently
  • Use CDN for static assets
  • Implement version management and rollback mechanisms

Testing Micro-Frontend ​

This template uses vue-template as a sub-application for testing. To test the micro-frontend:

  1. Start the main application: cd apps/qiankun-template && pnpm dev
  2. Start the sub-application: cd apps/vue-template && pnpm dev
  3. Visit http://localhost:9307/auto/vue/ to see the micro-frontend integration

Deployment ​

Build for Production ​

bash
# Build the main application
cd apps/my-main-app
pnpm build

# Build the sub-application
cd apps/vue-template
pnpm build

Deploy to Vercel ​

See Vercel Deployment Guide for detailed deployment instructions.

Copyright © 2025 VUP-CLI