gongshungongshun
461

Qiankun Vue Demo

screenshot of Qiankun Vue Demo

Github

Overview

The qiankun-vue-demo project serves as an excellent illustration of implementing a front-end microservices architecture using the qiankun library with the Vue technology stack. This project consists of a main application and multiple child applications, showcasing both hash and history mode routing capabilities. The seamless integration of qiankun allows developers to manage and deploy micro front-end applications effortlessly without additional configurations.

This demo stands out for its intuitive setup process and the clarity it brings to managing dependencies across various microservices. Each child application operates independently while still maintaining cohesive functionality as part of the larger ecosystem, making it a robust solution for modern web development.

Features

  • Global Variable Management: Utilizes the global variable __POWERED_BY_QIANKUN__ to differentiate between micro front-end and normal modes, eliminating the need for extra configurations.
  • Simple Installation Process: Just run npm install followed by npm run install-all to install dependencies for all projects, simplifying the initial setup.
  • Support for Various Routing Modes: Includes both hash mode routing and history mode routing through designated child projects, offering flexibility in application structure.
  • Keep-Alive for Tabs: The feature/keep-alive branch demonstrates how to implement a keep-alive effect for tabs using the loadMicroApp function.
  • Shared Components: The feature/share-component branch provides examples of how to share components between projects, promoting code reuse and efficiency.
  • Dependency Sharing: The feature/share-dependencies branch enables child projects to reuse common dependencies from the main application, streamlining performance and management.
  • Vite Integration: The feature/vite-child branch illustrates compatibility with Vite, showcasing a child project built with Vue 3.
  • Abstract Routing: The feature/abstract-route branch allows different pages of multiple child applications to be displayed simultaneously under the main project.