vtw
v0.1.8-beta1
Published
一个将vue单文件组件转成小程序组件的工具
Downloads
7
Maintainers
Readme
一个将vue单文件组件转成小程序组件的工具
使用
查看帮助
vtw
基本用法
vtw <input> [output] -c <path>
配置项
- importAppend: string[] 增加的依赖
- importRemove: string[] 删除的依赖
- importReplace: object 替换依赖源
例子:
{
"importAppend": [
"import add from 'add';"
],
"importRemove": [
"vue"
],
"importReplace": {
"old-dep": "new-dep"
}
}
使用示例
- 将
/path/from
目录下的vue文件,转换并写入到/path/to
目录下
vtw /path/from /path/to
- 将
/path
目录下的Test.vue文件,转换并写入到/path/to
目录下
vtw /path/Test.vue /path/to
- 将
/path
目录下的Test.vue文件,转换输出到控制台
vtw /path/Test.vue
- 自定义配置
vtw /path/Test.vue -c ./config.json
特性
template 转 wxml
支持:
- 标签转换
div -> view
img -> image
- 部分内置指令,
v-text
,v-show
,v-if
,v-else-if
,v-else
,v-for
- 属性
v-bind:prop
|:prop
- 事件
v-on:event
|@event
script 转 js
支持:
- 生命周期
- data
- props
- computed
- watch
- components,只会转换相对路径的依赖
- setData,所有对
this
视图变量的引用都会加入data成员,对它的更新都会转成setData调用
css | scss | less
目前只是简单拷贝而已
⚠️ 注意事项
- 事件和属性不支持动态绑定
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
- 不支持修饰符。指令修饰符,事件修饰符和属性修饰符
- 不支持指令,以下内置指令也不支持
`v-html`, `v-once`, `v-pre`, `v-cloak`, `v-once`
- vue 内置的组件,exp:
component
,transiton
- 不支持默认插槽,不支持作用域插槽
slot-scope
<button type="submit">
<slot>Submit</slot>
</button>
- 组件不支持
filters, directives, mixins
配置 - vue 里提供的组件实例属性和方法都不支持
`$data, $props, $el, $options, $parent, $root, $children, $slots, $scopedSlots, $refs, $isServer, $attrs, $listeners, $watch, $on`