I have a dream, I hope that can load a components of other frameworks as simple as loading a <iframe>
tag in a react project.
git clone git@github.com:y805939188/react-vue-micro-frame.git
cd react-vue-micro-frame
npm install
npm run start
npm install --save react-vue-micro-frame
/** Load remote components **/
import React from 'react';
import VueFrame from 'react-vue-micro-frame';
const Test = () => (
<div>
<VueFrame jsurl="http://originPath/vueComponent.umd.js"/>
</div>
)
/** Load local components **/
import React from 'react';
import VueFrame from 'react-vue-micro-frame';
import VueComponent from './vueComponent.vue';
const Test = () => (
<div>
<VueFrame componet={VueComponent} />
</div>
)
/** You can also load a remote react component **/
import React from 'react';
import { ReactFrame } from 'react-vue-micro-frame';
const Test = () => (
<div>
<ReactFrame jsurl="http://reactComponentAddress.umd.js" />
</div>
)
NOTE: Components development must use the umd specification. I recommend using "vue-cli" to write a "vue" component. How to write a "vue" component with use "vue-cli" And you can use the elf-cli to easily create a react component that meets the umd.
Only jsurl or component attributes are required, other parameters are optional | parameter | type | need | features |
---|---|---|---|---|
jsurl | string | jsurl and component must be one of two | js script of the remote vue or react component | |
component | VueComponent | jsurl and component must be one of two | local vue component | |
extraProps | Object | not necessary | properties passed to the component | |
visible | boolean | not necessary | whether to show component | |
cssurl | string | not necessary | The address of the remote css. If determine that this address has a css file, you can use this property | |
name | string | not necessary | The name of the remote component | |
loadType | 'xhr' or 'script' | not necessary | The way to load remote components, using xhr has cross-domain risks. When there is cross-domain risks, it will be forced to use script loading. |
/** vue-cli's vue.config.js */
module.exports = {
css: {
extract: false,
},
}