vtw

一个将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`