@zhangleilaoge/vue-code-converter NPM

vue-code-converter

一、介绍

vue 代码转换工具，目前支持两种格式转换：

option-style -> composition-api-style
decorator-style -> composition-api-style

二、特性说明

option-style
- data -> ref()
- computed -> computed()
- watch -> watch()
- methods -> function
- props -> toRefs()
- inject -> inject()
- provide -> provide()
decorator-style
- get, set -> computed
- @Watch, @Emit, @Model, @Inject, @Model, @Provide
vuex
- mapState, mapGetters -> computed()
- mapActions, mapMutations -> function
- createNamespacedHelpers
lifecycle
- beforeCreate, created -> Immediate function
- beforeUnmount, beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- xxx -> onXxx
this
- xx -> xx.value
- $attrs, $slots, $parent, $root, $listeners, $refs, $emit -> ctx.$xx
- $xx -> ctx.root.$xx
- { xx } = this -> xx = xx.value

二、整体架构

转换能力主要依赖 typescript 的 ast 能力实现。整体架构如下： alt text

三、使用方式

2.1 在线转换

转化平台在线代码转换：https://stardew.site/briar/tools/composition-style-converter

2.2 脚本转换

# 全局安装 `@briar/vue-code-converter`
npm add @briar/vue-code-converter -g

# 获取 cli 选项帮助说明
vue-convert -h

# 对指定目录或文件进行代码转化（默认为当前目录）
vue-convert -p ./client/pages/center

2.3 方法调用

安装 @briar/vue-code-converter：

npm add @briar/vue-code-converter

在代码中直接调用转换方法：

import { convert } from '@briar/vue-code-converter';

const { output, warning } = convert(input, {
	// 设置为 true 开启非法语法告警
	strict: true,
	// 设置输出结果的 prettier 格式化参数，类型与 prettier.format 的 option 类型一致（https://www.prettier.cn/docs/options.html）
	// 以下为默认值
	prettier: {
		parser: 'vue',
		plugins: [parserHtml],
		singleQuote: true,
		semi: true,
		printWidth: 80,
		tabWidth: 2,
		useTabs: false,
		trailingComma: 'none',
		bracketSpacing: true,
		vueIndentScriptAndStyle: false
	}
});