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 project root, add a Vue sub-application first
vup add my-vue-sub-app

# In another terminal, start the sub-application
cd apps/my-vue-sub-app
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/
│   │   ├── Index.vue          # Home page
│   │   ├── 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
├── demo.html                 # Micro-frontend demo entry
├── auto-imports.d.ts         # Auto imports declarations
├── package.json              # Dependencies and scripts
└── vite.config.js            # Vite configuration

Core Features ​

Micro-Frontend Architecture ​

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">Auto Load Example</h1>
    </header>
    <div
      id="auto-app-container"
      class="min-h-[400px] rounded border border-dashed border-gray-300 bg-white"
    ></div>
  </section>
</template>

Route-Based Micro-App Loading ​

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();

Global State Management ​

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

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

actions.onGlobalStateChange((state, prev) => {
  console.log('Global state changed:', state, prev);
});

actions.setGlobalState(state);

Development Tools ​

Vite Configuration ​

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

javascript
// vite.config.js (excerpt)
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,
  },
});

Available Scripts ​

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

Testing Micro-Frontend ​

Use your Vue sub-application for testing. To test the micro-frontend:

  1. Start the main application: cd apps/my-main-app && pnpm dev
  2. Start the sub-application: cd apps/my-vue-sub-app && 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/my-vue-sub-app && pnpm build)

Deploy to Vercel ​

See Vercel Deployment Guide for detailed deployment instructions.

Copyright © 2025 VUP-CLI