vue3-script-to-setup
v0.2.3
Published
transform your vue3 script to setup mode
Downloads
45
Readme
origin code
<script lang="ts">
import { defineComponent, PropType, ref } from "vue"
import Header from "../components/Header.vue"
import Tab from "../components/Tab.vue"
import touchdir from "vtouchdir"
export default defineComponent({
name: 'App',
components: {
Header,
Tab,
},
directives: {
force: {},
touchdir,
},
props: {
items: Array as PropType<number[]>
},
emit: ["click"],
setup(props, { emit, attrs, slots: mySlots, expose }) {
const bar = ref(0)
expose({ bar })
emit("change");
return {
bar
}
}
})
</script>
<template>
<div>App</div>
</template>
npx tosetup /src/App.vue
transform code
<script lang="ts" setup>
import { ref, useAttrs, useSlots, } from "vue";
import Header from "../components/Header.vue";
import Tab from "../components/Tab.vue";
import vTouchdir from "vtouchdir";
const props = defineProps<{items?: number[]; }>();
const emit = defineEmits(["click", "change"]);
// custom directive
const vForce = {};
const attrs = useAttrs();
const mySlots = useSlots();
const bar = ref(0);
emit("change");
defineExpose({ bar });
</script>
<template>
<div>App</div>
</template>
Installation
npm
npm install --save-dev vue3-script-to-setup
yarn
yarn add vue3-script-to-setup -D
pnpm
pnpm add vue3-script-to-setup -D
Usage
Using Command
npx tosetup [filePath]
example
npx tosetup /src/App.vue --propsNotOnlyTs
A new App.new.vue
file will be created in the same directory
将会在同目录下创建一个 App.new.vue
的新文件
command
| options | english | chinese |
| ------- | ------- | ------- |
| --propsNotOnlyTs | props
not using TypeScript-only Features | props
不使用 TypeScript-only Features |
| --notUseNewFile | instead of creating a new file, replace the contents of the file directly with the setup
mode | 不创建一个新文件,而是将文件中的内容直接替换为 setup
模式 |
Using tosetup.config
Create a tosetup.config.ts/tosetup.config.js
file in the root directory
在根目录下创建一个 tosetup.config.ts/tosetup.config.js
文件
import { defineConfig } from "vue3-script-to-setup";
export default defineConfig({
propsNotOnlyTs: true,
notUseNewFile: true,
path: {
"example/src": {
mode: "*",
excludes: [],
},
"example/src/components": {
mode: "*",
excludes: "Header.vue",
}, // Find the .vue file in the example/src directory, exclude Header.vue files
"example/src/views": ["404.vue"], // transform only the 404.vue in the example/src/views directory
},
});
npx tosetup
defaultOption
interface DefaultOption {
propsNotOnlyTs?: boolean;
notUseNewFile?: boolean;
path: {
[key: string]:
| string
| string[]
| {
mode: "*" | "**";
excludes: string | string[];
};
};
}
Limitations/限制
Unable to transform TypeScript-only Features
of defineEmits
, support only
无法将 defineEmits
转换为 TypeScript-only Features
模式,仅支持转换为数组
const emit = defineEmits(['change', 'delete'])
If expose
is not specified, the reference may fail in the outer layer.
如果在 script
代码下子组件没有通过 expose
暴露内部状态,转换为 setup
代码后父组件将引用失败。
// Child.vue
export default {
setup() {
function foo() {}
return { foo }
}
}
// Parent.vue
export default {
mounted() {
// Child.vue is script code, it`s work
// Child.vue is setup code, foo is undefined, need `expose({ foo })`
this.$refs.child.foo()
}
}
Not supported/不支持
export default defineComponent({
name: 'App',
...optoons, // ❌
directives: {
...directives, // ❌
},
emit: ["click"],
// ...options ❌
setup(props, { emit, ...options }) {
const obj = reactive({ a, b, c })
options.expose() // ❌
const { ... } = toRefs(obj) // ✅
function handle() {} // ✅
return {
...toRefs(obj), // ❌
handle() {}, // ❌
}
}
})