vue-to-react

Preview screenshots

Install

$npminstallvue-to-react-g

Usage

Usage: vtr [options]Options:  -V, --version     output the version number  -i, --input       the input pathfor vue component  -o, --output      the output pathfor react component, which default value isprocess.cwd()  -n, --name        the output file name, which default value is"react.js"  -h, --help        output usage information

$ vtr -i my/vue/component

$ vtr -i my/vue/component -o my/vue -ntest

Attention

// Not support<divv-bind:class="{ active: isActive }"></div><divv-bind:class="[activeClass, errorClass]"></div>// support<divv-bind:class="classes"></div>computed:{classes(){// ...returnyour-classes;}}// ...// react component// ...render(){constclasses=your-classes;return(<divclass={classes}></div>)}

// Not support<divv-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><divv-bind:style="[baseStyles, overridingStyles]"></div>// support<divv-bind:style="style"></div>computed:{style(){return{activeColor:'red',fontSize:30}}}// ...// react component// ...render(){conststyle={activeColor:'red',fontSize:30};return(<divstyle={style}></div>)}

// Not support<div :msg="msg" @click="clickHandler"></div>// Support<divv-bind:msg="msg"v-on:click="clickHandler"></div>

// Life-cycle methods relations mappingconstcycle={'created':'componentWillMount','mounted':'componentDidMount','updated':'componentDidUpdate','beforeDestroy':'componentWillUnmount','errorCaptured':'componentDidCatch','render':'render'};

// ...computed:{// supporttest(){returnyour-computed-value;},// not supporttest2:{get(){},set(){}}}// ...

// vue component// ...computed:{// supporttest(){this.title='messages';// Don't do this, it won't be handle and you will receive a warning.returnthis.title+this.msg;}}// ...// react component// ...render(){consttest=this.state.title+this.state.msg;}// ...

Development

LICENSE