https://github.com/shaobeichen/vue-remote-load

💡 Vue load remote component. 如何加载Vue远程组件。
https://github.com/shaobeichen/vue-remote-load

component ref remote-component vue vue3

Last synced: 12 days ago
JSON representation

💡 Vue load remote component. 如何加载Vue远程组件。

• Host: GitHub
• URL: https://github.com/shaobeichen/vue-remote-load
• Owner: shaobeichen
• License: mit
• Created: 2024-11-12T03:32:04.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-12T09:58:57.000Z (2 months ago)
• Last Synced: 2024-12-21T20:19:47.973Z (about 1 month ago)
• Topics: component, ref, remote-component, vue, vue3
• Language: Vue
• Homepage:
• Size: 149 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-remote-load

Vue load remote component. 如何加载 Vue 远程组件。

![preview](./assets/image.png)

上图为演示效果及解释。

```js

// 通过配置指定的数据结构

// 动态的渲染本地和远程组件

const components = [

  {

    name: 'remote-component1',

    remote: true,

  },

  {

    name: 'local-button',

    remote: false,

  },

  {

    name: 'remote-component2',

    remote: true,

  },

]

```

# 生产者使用 (远程组件方)

新建一个命令行窗口执行

```

pnpm dev:p

```

# 消费者使用 (容器方)

新建一个命令行窗口执行

```

pnpm install

pnpm dev:c

```

# 预览

浏览器打开 http://localhost:3000