vue to react

反应

尝试将VUE组件（支持JSX和SFC）转换为反应组件。

由于V0.0.8支持SFC

预览屏幕截图

变换JSX组件：

变换SFC组件：

安装

先决条件：node.js（> = 8.0）和npm（> = 5.0）

 $ npm install vue - to - react - g

用法

Usage: vtr [options]

Options:

  -V, --version     output the version number
  -i, --input       the input path for vue component
  -o, --output      the output path for react component, which default value is process.cwd ()
  -n, --name        the output file name, which default value is " react.js "
  -h, --help        output usage information

示例：

$ vtr -i my/vue/component

上面的代码将把my/vue/component.js转换为${process.cwd()}/react.js 。

$ vtr -i my/vue/component -o my/vue -n test

以上代码将把my/vue/component.js转换为my/vue/test.js 。

这是一个演示。

注意力

以下列表，当您使用vue-to-rexct将VUE组件转换以反应组件时，您应该注意：

• 不支持类对象语法绑定和类数组语法绑定

 // Not support 
< div v-bind : class = "{ active: isActive }" > </ div >
< div v - bind : class = "[activeClass, errorClass]" > < / div >

// support
< div v-bind : class = "classes" > </ div >
computed: {
    classes ( ) {
        // ...
        return your - classes ;
    }
}

// ...

// react component
// ...

render ( ) {
    const classes = your - classes ;
    return (
        < div class = { classes } > </ div > 
    )
}

• 不支持样式对象语法绑定和样式数组语法绑定

 // Not support 
< div v-bind : style = "{ color: activeColor, fontSize: fontSize + 'px' }" > </ div >
< div v - bind : style = "[baseStyles, overridingStyles]" > < / div >

// support
< div v-bind : style = "style" > </ div >
computed: {
    style ( ) {
        return {
            activeColor : 'red' ,
            fontSize : 30
        }
    }
}

// ...

// react component
// ...

render ( ) {
    const style = {
      activeColor : 'red' ,
      fontSize : 30
    } ;
    return (
        < div style = { style } > </ div > 
    )
}

• 不支持VUE组件的watch道具
• 如果要转换JSX组件，则不支持VUE组件的components 。请参阅组件提示。但是，当您转换SFC时，支持components支架。
• 仅支持部分内置的VUE指令（SFC）： v-if ， v-else ， v-show ， v-for ，V-bind， v-bind ，V-on， v-on ， v-text ，V-Text和v-html 。
• 不支持V-Bind Shorthand和V-On Shorthand（SFC）：

 // Not support
< div : msg = "msg" @ click = "clickHandler" > < / div >

// Support
< div v-bind : msg = "msg" v-on : click = "clickHandler" > </ div >

• 不支持自定义指令和过滤器表达式（SFC）。
• 仅支持vue组件的部分升力周期方法。升降周期关系映射如下：

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

• 每个计算的道具都应该是一个函数：

 // ...

computed: {
    // support
    test ( ) {
        return your - computed - value ;
    } ,

    // not support
    test2 : {
        get ( ) { } ,
        set ( ) { }
    }
}

// ...

• VUE组件的计算道具将被放入React组件的渲染方法中：

 // vue component
// ...

computed: {
    // support
    test ( ) {
        this . title = 'messages' ; // Don't do this, it won't be handle and you will receive a warning.
        return this . title + this . msg ;
    }
}

// ...

// react component
// ...

render ( ) {
    const test = this . state . title + this . state . msg ;
}

// ... 

发展

1. 叉
2. 创建您的功能分支（git Checkout -B my-new-feature）
3. 提交您的更改（git commit -am'添加一些功能'）
4. 推到分支（git推出来源我的新功能）
5. 创建新的拉请求

执照

该仓库在麻省理工学院下发布。