readme

vue-to-react-tool

Getting started

for cli

# install
$ sudo tnpm install vue-to-react-tool -g

# usage
$ convert components/test.vue -o components  // file
$ convert components -o components  // dir

# options
Usage: convert [targetPath] [options]
Options:
    -v, --version  output current version
    -o, --output   the output path for react component, default is process.cwd()/react__from__vue
    -i, --ignore   fileName or just RegExp => .ts$,ignoreFile.js,ignoreDir  default: node_modules
    -m, --module   use cssModule(styles.***),default is global mode(\"class-name\")
    -t, --ts       it is a typescript component
    -h, --help     output usage information

for node

$ npm install vue-to-react-tool -S

import transformer from 'vue-to-react-tool/lib/transform/transform'

transformer(content:string, opts:Opts) // Opts = { isTs:boolean } isTs源文件是否使用了typescript

说明

目前已成功转换:

<input checked="" disabled="" type="checkbox"> v-if、v-else-if、v-else
<input checked="" disabled="" type="checkbox"> v-for
<input checked="" disabled="" type="checkbox"> v-show
<input checked="" disabled="" type="checkbox"> v-bind v-bind:attr.sync = xxx> // 双向绑定的特殊情况 v-bind:attr=xxx v-on:emiterName ==> emiterName={(new) => this.setState({xxx:new})
<input checked="" disabled="" type="checkbox"> v-model:与v-bind:attr.sync 类似, 因为checkbox需要特殊处理，type需要是静态的，否则会当成input处理
<input checked="" disabled="" type="checkbox"> v-on
<input checked="" disabled="" type="checkbox"> v-text =》{{msg}}
<input checked="" disabled="" type="checkbox"> v-html => dangerousHtml
<input checked="" disabled="" type="checkbox"> class => className (考虑class v-bind:class同时存在的情况)
<input checked="" disabled="" type="checkbox"> data() => this.state
<input checked="" disabled="" type="checkbox"> Props => props
<input checked="" disabled="" type="checkbox"> {{ expression }} => { expression }
<input checked="" disabled="" type="checkbox"> 组件名转驼峰
<input checked="" disabled="" type="checkbox"> created: 'componentWillMount',
<input checked="" disabled="" type="checkbox"> mounted: 'componentDidMount',
<input checked="" disabled="" type="checkbox"> updated: 'componentDidUpdate',
<input checked="" disabled="" type="checkbox"> beforeDestroy: 'componentWillUnmount',
<input checked="" disabled="" type="checkbox"> errorCaptured: 'componentDidCatch',
<input checked="" disabled="" type="checkbox"> template => render
<input checked="" disabled="" type="checkbox"> style => index.(css | stylus | sass | less) (目前考虑)
<input checked="" disabled="" type="checkbox"> 移除ts type功能
<input checked="" disabled="" type="checkbox"> this.$refs
<input checked="" disabled="" type="checkbox"> V-for V-if v-show 已考虑同时存在的情况但是官方并不推荐这种写法哦 vue风格指南

仍需要处理

<input disabled="" type="checkbox"> 事件修饰符：
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<input disabled="" type="checkbox"> v-on:attr = handle => v-on 指令表达式暂不支持模板字符串的情况
<input disabled="" type="checkbox"> v-bind.sync="doc" => 暂不支持用对象设置多个props
<input disabled="" type="checkbox"> watch
<input disabled="" type="checkbox"> vue 自带组件如 transition
<input disabled="" type="checkbox"> Vux / vue-router(目前需求是组件、模块的转换，无需，看后续需求在考虑)
<input disabled="" type="checkbox"> 。。。

目前是对我们的一个vue组件库进行转换，不过实际的代码情况会更加复杂，开发同学的编码习惯差别也很大，还需要针对各种情况详细处理。同时此方案也可以运用于小程序代码互转等场景中，所以我认为学写一下还是不错的，对代码编译的过程能更加深入了解

Package detail

readme

readme

vue-to-react-tool

Getting started

for cli

for node

说明

目前已成功转换: