Instructions for using the plug-in component in the selected area

Overview

Now you can render in the selected area@/pluginsThe components in the plug-in! This functionality is implemented through the plug-in component adapter, which supports dynamic import and rendering of plug-in components.

Method of use

1. Configure the plug-in component in the form field.

In the configuration of the form field, set the following properties:

{
  "Component": "DevComponent",
  "Config": {
    "DevComponentName": "test-plugin:TestHome",  // 格式：插件名:组件名
    "DevComponentPath": "/plugins/test-plugin/components/TestHome.vue"
  }
}

2. Component naming convention

The naming format for plug-in components is:插件名:组件名

• Plug-in name：Directory name of the plug-in, such as 'test-plugin'
• Component Name：The component file name (without the. vue extension), such as 'TestHome'

3. Supported Path Formats

Method 1: Use the/plugins prefix

"DevComponentPath": "/plugins/test-plugin/components/TestHome.vue"

Approach 2: Use relative paths

"DevComponentPath": "/test-plugin/components/TestHome.vue"

Example configuration

Example 1: The counter component of the rendering test plug-in

{
  "Name": "testCounter",
  "Label": "测试计数器",
  "Component": "DevComponent",
  "Config": {
    "DevComponentName": "test-plugin:TestCounter",
    "DevComponentPath": "/plugins/test-plugin/components/TestCounter.vue"
  }
}

Example 2: Rendering the components of a presentation plug-in

{
  "Name": "demoComponent",
  "Label": "演示组件",
  "Component": "DevComponent",
  "Config": {
    "DevComponentName": "demo-plugin:DemoComponent",
    "DevComponentPath": "/plugins/demo-plugin/components/DemoComponent.vue"
  }
}

Technical realization

1. Plug-in component adapter

System UsagePluginComponentAdapterto manage plug-in components:

• Automatically register plug-in components
• Support dynamic import
• Provide Component Factory Functions

2. Component Import Policy

1. Import from the mapping table first: Predefined component import function.
2. Dynamic Path Import: Dynamically import components from the plug-in directory.
3. Plugin Manager Get: Get components from registered plugins.

3. Error Handling

• Display error message when component does not exist
• Log verbose when import fails
• Support for downgrading to default components

Precautions

1. Component dependencies

Make sure that the plug-in component does not depend on external global variables or services, and all dependencies should be passed in through props.

2. Component naming

Component names must be unique, recommended插件名:组件名The format avoids conflicts.

3. Path configuration

• The path must end/plugins/or/Beginning
• Component file must exist in the specified path
• Support for nested directory structures

4. Performance considerations

• Components are dynamically imported when needed
• Imported components are cached
• Recommended number of components to be used

Troubleshooting

FAQ

1. • • Component cannot be displayed * *
   • Check whether the component path is correct
   • Verify that the plug-in is enabled
   • Viewing Browser Console Error Messages

2. Component import failed

   • Check whether the component file exists
   • Verify component syntax is correct
   • Check whether the network request is successful

3. Component style exception

   • Check for conflicting component styles
   • Confirm CSS Scope Settings
   • Check to see if the style file is loaded correctly

Debugging skills

1. Use browser developer tools to view component registration status
2. CheckpluginComponentAdapterRegistered components in
3. View the component load request in the network panel.
4. Use the Vue DevTools to check the component tree structure.

Extended functionality

1. Custom component registration

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

// 注册自定义组件
pluginComponentAdapter.registerPluginComponent('my-plugin', 'MyComponent', MyComponent)

2. Dynamic Component Path

// 支持动态路径解析
const componentPath = `/plugins/${pluginName}/components/${componentName}.vue`

3. Component lifecycle management

// 监听组件注册事件
pluginComponentAdapter.on('componentRegistered', (pluginName, componentName) => {
  console.log(`组件已注册: ${pluginName}:${componentName}`)
})

Summary

With the plug-in component adapter, you can now:

1.✅Render the plug-in component in the selected area 2.✅Support for dynamic import and caching 3.✅Unified Component Management Interface 4.✅Perfect error handling mechanism 5.✅Flexible configuration

Start using plug-in components to extend your app's functionality!