Plug-in system documentation

Overview

This is a modern plug-in system based on Vue.js, which supports dynamic loading, hot plug, component reuse and other functions. The modular design of the system provides complete plug-in lifecycle management, allowing developers to easily extend application functionality.

system Architecture

src/views/plugins/
├── index.js                    # 插件系统统一入口
├── plugin-manager.js           # 插件管理器（核心）
├── plugin-config-manager.js    # 配置管理器
├── plugin-discovery.js         # 插件发现器
├── plugin-registry.js          # 插件注册器
├── plugin-importer.js          # 插件导入器
├── plugin-initializer.js       # 插件初始化器
├── plugin-component-adapter.js # 组件适配器
├── plugin-dependency-manager.js # 依赖管理器
├── plugin-dependency-loader.js # 依赖加载器
├── plugin-config.js            # 系统配置文件
├── test-plugin/                # 测试插件示例
│   ├── index.js               # 插件配置
│   ├── components/            # 插件组件
│   │   ├── TestHome.vue      # 首页组件
│   │   ├── TestCounter.vue   # 计数器组件
│   │   └── TestForm.vue      # 表单组件
│   └── package.json          # 插件包信息
├── demo-plugin/               # 演示插件示例
│   ├── index.js              # 插件配置
│   └── index.vue             # 主组件
├── dependency-demo-plugin/    # 依赖管理演示插件
│   ├── index.js              # 插件配置
│   ├── components/           # 插件组件
│   │   └── DependencyDemo.vue # 依赖演示组件
│   ├── utils/                # 内部工具模块
│   │   └── chart-utils.js    # 图表工具
│   └── package.json          # 插件包信息
└── docs/                      # 文档目录
    ├── README.md                           # 系统概述（本文档）
    ├── core-principles.md                  # 核心原理详解
    ├── development-guide.md                # 开发指南
    ├── user-guide.md                       # 用户使用指南
    ├── plugin-component-usage.md           # 组件使用说明
    └── plugin-component-config-examples.md # 配置示例

Core Module Description

1. Plug-in Manager (plugin-manager.js)

Duties：Plug-in registration, uninstall, life cycle management
Function：Route registration, component registration, Vuex module management
Features：Support hot-plug, dynamic management plug-in status

2. Configuration Manager (plugin-config-manager.js)

Duties：Plug-in Enable/Disable State Management
Function：Configure persistence, user preferences
Features：localStorage-based, support for configuring hot updates

3. Plug-in Finder (plugin-discovery.js)

Duties：Discovery and registration of plug-in configurations
Function：Dynamic scanning, cache configuration, status query
Features：Support for runtime plug-in discovery

4. Plug-in registrar (plugin-registry.js)

Duties：Centrally manage all plug-in configurations
Function：Plug-in metadata, dependencies, versioning
Features：Unified plug-in configuration interface

5. Plug-in Importer (plugin-importer.js)

Duties：Handling dynamic import of plug-ins
Function：Webpack compatibility, component mapping, error handling
Features：Support for multiple import policies

6. Plug-in initializer (plugin-initializer.js)

Duties：Plugin initialization at system startup
Function：Dependency Injection, Startup Order, Error Recovery
Features：Intelligent initialization, support failure retry

7. Component adapter (plugin-component-adapter.js)

Duties：Unified management of plug-in components
Function：Component registration, dynamic import, lifecycle management
Features：Support for multiple component types, intelligent caching

8. Dependency Manager (plugin-dependency-manager.js)

Duties：Independent management of plug-in dependencies
Function：Dependency resolution, dynamic loading, and version management
Features：Support multiple dependency types to avoid main project pollution

9. Dependent loader (plugin-dependency-loader.js)

Duties：Dynamic loading of plug-in dependencies
Function：CDN loading, local import, dependency injection
Features：Smart Caching, Error Handling, Degradation Scenario

Core Principles

1. Dynamic import mechanism

javascript

// 使用 Webpack 的 require.context 动态导入
const pluginContext = require.context('@/views/plugins', true, /^\.\/([^/]+)\/index\.js$/)

2. Component Registration Policy

javascript

// 支持多种组件来源
- Vue 单文件组件 (.vue)
- 内联定义组件 (JavaScript 对象)
- 动态导入组件 (异步加载)

3. Routing dynamic registration

javascript

// 自动为插件路由添加前缀
path: `/plugin/${pluginName}${route.path}`

4. Configure hot updates

javascript

// 基于 localStorage 的配置持久化
// 支持运行时配置更新

5. Independent dependency management

javascript

// 插件可以定义自己的依赖，无需在主项目中配置
export const dependencies = {
  'lodash': {
    type: 'external',
    version: '^4.17.21',
    source: 'https://unpkg.com/lodash@4.17.21/lodash.min.js'
  }
}

Quick Start

1. Initialize the plug-in system

javascript

import { initializePluginSystem } from '@/views/plugins'

// 在应用启动时初始化
await initializePluginSystem({
  router: this.$router,
  store: this.$store
})

2. Use the plug-in management function

javascript

import { pluginManager, pluginConfigManager } from '@/views/plugins'

// 启用插件
pluginConfigManager.enablePlugin('test-plugin')
await pluginManager.registerPlugin('test-plugin', { enabled: true })

// 禁用插件
pluginConfigManager.disablePlugin('test-plugin')
await pluginManager.unregisterPlugin('test-plugin')

3. Render the plug-in component in the selected area

javascript

// 表单字段配置
{
  "Component": "DevComponent",
  "Config": {
    "DevComponentName": "test-plugin-TestHome",
    "DevComponentPath": "/plugins/test-plugin/components/TestHome.vue"
  }
}

Plug-in System Features

✅Core features

Dynamic plug-in loading and unloading
Component Hot Swap
automatic route registration
Configuration persistence
Independent dependency management
Error handling and recovery

✅Development Experience

Zero Configuration Startup
Hot Heavy Load Support
Full Type Tips
Rich Debugging Information
Detailed error log

✅Performance Optimization

Load as required
Component Cache
Intelligent preloading
Memory Management
Startup Optimization

✅Extensibility

plug-in lifecycle hook
Event System
Middleware support
Custom Configuration
Inter-plug-in communication

Use Scenario

1. Modular function

Split complex functionality into separate plug-ins
Load on demand to improve performance
Team Collaborative Development

2. Business Expansion

Quickly add new features
Support for third-party plug-ins
Dynamic function switch

3. Component Reuse

Cross-project component sharing
Standardized Component Library
Version Management

4. System Integration

Micro front-end architecture
Module Federation
Distributed deployment

Best Practices

1. Plugin Design Principles

Single Responsibility: One plugin focuses on one function
Loose coupling: reduce dependencies between plug-ins
High cohesion: related functions are centrally managed
Configurable: Supports runtime configuration

2. Performance Considerations

Rational use of lazy loading
Avoid circular dependencies
Timely clearing of resources
Monitor memory usage

3. Error handling

Graceful degradation
Error boundary
User Friendly Tips
Detailed Error Log

Troubleshooting

FAQ

The plug-in cannot be loaded.
- Check whether the plug-in path is correct
- Verify that the plug-in is enabled
- Viewing Browser Console Errors
Component rendering failed
- Verify Component Configuration Format
- Check whether the component file exists
- Confirm component syntax is correct
Routing does not take effect
- Check the routing configuration format
- Confirm that the plug-in is enabled
- Verify that the routing path is correct

Debugging skills

Using Browser Developer Tools
View plug-in system status
Check component registration status
Monitoring Network Requests

Summary

This plug-in system provides:

Complete plug-in ecosystem: Full process support from development to deployment
Flexible architecture design: Supports multiple usage scenarios and expansion requirements
- - Excellent development experience * *: zero configuration, hot overload, type prompt
- - Powerful performance optimization * *: on-demand loading, intelligent cache, memory management
Perfect error handling: elegant degradation, detailed logging, user-friendly.

Get started with a plug-in system to make your application more modular and extensible!

Core Documents

README.md - 系统概述和架构说明（本文档）
core-principles.md - 核心原理和技术实现详解
development-guide.md - 插件开发完整指南

Using Documents

user-guide.md - 用户使用指南和常见问题解决
plugin-component-usage.md - 插件组件使用说明
plugin-component-config-examples.md - 组件配置示例

Quick Links

Plug-in Management：Access the plug-in management page to enable/disable a plug-in
Development example：Refer to the 'test-plugin and demo-plugin directories
API Reference：View detailed API documentation for each module

**Start your plugin development journey now!**🚀

Plug-in system documentation ​

Overview ​

system Architecture ​

Core Module Description ​

1. Plug-in Manager (plugin-manager.js) ​

2. Configuration Manager (plugin-config-manager.js) ​

3. Plug-in Finder (plugin-discovery.js) ​

4. Plug-in registrar (plugin-registry.js) ​

5. Plug-in Importer (plugin-importer.js) ​

6. Plug-in initializer (plugin-initializer.js) ​

7. Component adapter (plugin-component-adapter.js) ​

8. Dependency Manager (plugin-dependency-manager.js) ​

9. Dependent loader (plugin-dependency-loader.js) ​

Core Principles ​

1. Dynamic import mechanism ​

2. Component Registration Policy ​

3. Routing dynamic registration ​

4. Configure hot updates ​

5. Independent dependency management ​

Quick Start ​

1. Initialize the plug-in system ​

2. Use the plug-in management function ​

3. Render the plug-in component in the selected area ​

Plug-in System Features ​

✅Core features ​

✅Development Experience ​

✅Performance Optimization ​

✅Extensibility ​

Use Scenario ​

1. Modular function ​

2. Business Expansion ​

3. Component Reuse ​

4. System Integration ​

Best Practices ​

1. Plugin Design Principles ​

2. Performance Considerations ​

3. Error handling ​

Troubleshooting ​

FAQ ​

Debugging skills ​

Summary ​

📚Document Navigation ​

Core Documents ​

Using Documents ​

Quick Links ​

Plug-in system documentation

Overview

system Architecture

Core Module Description

1. Plug-in Manager (plugin-manager.js)

2. Configuration Manager (plugin-config-manager.js)

3. Plug-in Finder (plugin-discovery.js)

4. Plug-in registrar (plugin-registry.js)

5. Plug-in Importer (plugin-importer.js)

6. Plug-in initializer (plugin-initializer.js)

7. Component adapter (plugin-component-adapter.js)

8. Dependency Manager (plugin-dependency-manager.js)

9. Dependent loader (plugin-dependency-loader.js)

Core Principles

1. Dynamic import mechanism

2. Component Registration Policy

3. Routing dynamic registration

4. Configure hot updates

5. Independent dependency management

Quick Start

1. Initialize the plug-in system

2. Use the plug-in management function

3. Render the plug-in component in the selected area

Plug-in System Features

✅Core features

✅Development Experience

✅Performance Optimization

✅Extensibility

Use Scenario

1. Modular function

2. Business Expansion

3. Component Reuse

4. System Integration

Best Practices

1. Plugin Design Principles

2. Performance Considerations

3. Error handling

Troubleshooting

FAQ

Debugging skills

Summary

📚Document Navigation

Core Documents

Using Documents

Quick Links