# 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
$ 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
- v-if、v-else-if、v-else
- v-for
- v-show
- v-bind v-bind:attr.sync = xxx> // 双向绑定的特殊情况 v-bind:attr=xxx v-on:emiterName ==> emiterName={(new) => this.setState({xxx:new})
- v-model:与v-bind:attr.sync 类似, 因为checkbox需要特殊处理,type需要是静态的,否则会当成input处理
- v-on
- v-text =》{{msg}}
- v-html => dangerousHtml
- class => className (考虑class v-bind:class同时存在的情况)
- data() => this.state
- Props => props
- {{ expression }} => { expression }
- 组件名转驼峰
- created: 'componentWillMount',
- mounted: 'componentDidMount',
- updated: 'componentDidUpdate',
- beforeDestroy: 'componentWillUnmount',
- errorCaptured: 'componentDidCatch',
- template => render
- style => index.(css | stylus | sass | less) (目前考虑)
- 移除ts type功能
- this.$refs
- V-for V-if v-show 已考虑同时存在的情况但是官方并不推荐这种写法哦 vue风格指南
仍需要处理
- 事件修饰符:
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
- v-on:attr = handle => v-on 指令表达式 暂不支持 模板字符串的情况
- v-bind.sync="doc" => 暂不支持用对象设置多个props
- watch
- vue 自带组件如 transition
- Vux / vue-router(目前需求是组件、模块的转换,无需,看后续需求在考虑)
- 。。。
目前是对我们的一个vue组件库进行转换,不过实际的代码情况会更加复杂,开发同学的编码习惯差别也很大,还需要针对各种情况详细处理。同时此方案也可以运用于小程序代码互转等场景中,所以我认为学写一下还是不错的,对代码编译的过程能更加深入了解