English | 简体中文
base on single-spa,you can load vue component in the react project
git clone [email protected]
cd mircro-tech
npm install
npm run start
npm install --save micro-tech
/** Load remote components **/
import React from 'react';
import VueFrame from 'micro-tech';
const Test = () => (
<div>
<VueFrame jsurl="https://originPath/vueComponent.umd.js"/>
</div>
)
/** Load local components **/
import React from 'react';
import VueFrame from 'micro-tech';
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 'micro-tech';
const Test = () => (
<div>
<ReactFrame jsurl="https://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"
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. |
- Load remote vue components
- Load local vue or react components
- Cross domain loading
- Static resource loading
- css style isolation
- Research if the component can be refactor with qiankun2.x
- Load the entire vue/react application from origin
- Render content to outside of the micro-frame. (At present, because of the react-vue-micro-frame be wrote with reference to primordial <iframe />, so the component can not render content to outside)
- design a pipeline to communication between the micro-frame and outside components. (This is necessary for scenarios with external using state management e.g. redux)
- The style isolation uses the shadow dom method, so temporarily does not support ie
- Static resources only support resources that are loaded through the src attribute, such as image and other resources, without any processing. For resources like ttf, there may be cross-domain situations.
- vue-cli will extract the css file separately by default, you can load the remote css through the cssurl property, or you can put the css into the js file by inline:
/** vue-cli's vue.config.js */
module.exports = {
css: {
extract: false,
},
}
- Please try and mention more bugs, I will continue to improve. If it is convenient, please give a star by the way.