# vtw

> 一个将vue单文件组件转成小程序组件的工具

Latest version **0.1.8-beta1** (published 2019-02-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install vtw
pnpm add vtw
yarn add vtw
bun add vtw
```

Provides the command `vtw`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8-beta1 |
| Published | 2019-02-28 |
| First published | 2018-12-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 139.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | youzan |
| Maintainers | zeusshuai |
| Keywords | transform, weapp, vue, miniprogram |

## Links

- npm: https://www.npmjs.com/package/vtw
- npm.io page: https://npm.io/package/vtw

## Dependencies (6)

- [mz](https://npm.io/package/mz.md) ^2.7.0
- [chalk](https://npm.io/package/chalk.md) ^2.4.1
- [commander](https://npm.io/package/commander.md) ^2.19.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.2.2
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.5.17
- [@babel/plugin-transform-template-literals](https://npm.io/package/@babel/plugin-transform-template-literals.md) ^7.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.8-beta1 (latest) — 2019-02-28
- 0.1.7 — 2019-02-22
- 0.1.6 — 2019-02-18
- 0.1.5 — 2019-02-18
- 0.1.4 — 2019-02-11
- 0.1.3 — 2019-02-11
- 0.1.2 — 2019-02-02
- 0.1.1 — 2019-02-02
- 0.1.0 — 2019-02-02
- 0.0.2 — 2019-01-28
- 0.0.1 — 2019-01-28
- 0.0.1-beta.5 — 2019-01-16
- 0.0.1-beta.4 — 2019-01-05
- 0.0.1-beta.3 — 2018-12-13
- 0.0.1-beta.2 — 2018-12-13
- … 2 more at https://npm.io/package/vtw/versions

## README

# 一个将vue单文件组件转成小程序组件的工具

## 使用

#### 查看帮助
```bash
vtw
```

#### 基本用法
```bash
vtw <input> [output] -c <path>
```

#### 配置项
- importAppend: string[]
增加的依赖
- importRemove: string[]
删除的依赖
- importReplace: object
替换依赖源

例子：
```json
{
  "importAppend": [
    "import add from 'add';"
  ],
  "importRemove": [
    "vue"
  ],
  "importReplace": {
    "old-dep": "new-dep"
  }
}
```

#### 使用示例
- 将 `/path/from` 目录下的vue文件，转换并写入到 `/path/to` 目录下
```bash
vtw /path/from /path/to
```
- 将 `/path` 目录下的Test.vue文件，转换并写入到 `/path/to` 目录下
```bash
vtw /path/Test.vue /path/to
```
- 将 `/path` 目录下的Test.vue文件，转换输出到控制台
```bash
vtw /path/Test.vue
```
- 自定义配置
```bash
vtw /path/Test.vue -c ./config.json
```

## 特性
#### template 转 wxml
支持：
- 标签转换
```js
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
目前只是简单拷贝而已

## ⚠️ 注意事项
- 事件和属性不支持动态绑定
```html
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
```
- 不支持修饰符。指令修饰符，事件修饰符和属性修饰符
- 不支持指令，以下内置指令也不支持
```js
`v-html`, `v-once`, `v-pre`, `v-cloak`, `v-once`
```
- vue 内置的组件，exp: `component`, `transiton`
- 不支持默认插槽，不支持作用域插槽`slot-scope`
``` html
<button type="submit">
  <slot>Submit</slot>
</button>
```
- 组件不支持 `filters, directives, mixins` 配置
- vue 里提供的组件实例属性和方法都不支持
```js
`$data, $props, $el, $options, $parent, $root, $children, $slots, $scopedSlots, $refs, $isServer, $attrs, $listeners, $watch, $on`
```

---
_Source: https://npm.io/package/vtw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._