vscode中生成vue3.0代码片段

1、 首先在vscode编辑器中打开，【文件】–>【首选项】–>【用户片段】–>选择vue.json

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"vue3": {
		"prefix": "vue3",
		"body": [
				"<template>",
				"    <div>\n",
				"    </div>",
				"</template>\n",
				"<script lang='ts'>",
			"import { defineComponent,reactive, toRefs, onBeforeMount, onMounted } from 'vue';",
			"import { useRoute, useRouter } from 'vue-router';",
			"export default defineComponent({",
			"    name: 'index',",
			"    setup(props, context) {",
			"    const route = useRoute();",
			"    const router = useRouter();",
			"    console.log('1-开始创建组件-setup')",
			"    const state = reactive({\n",
			"    })",
			"    const funcList = {",
			"        getInfo() {}",
			"    }",
			"    onBeforeMount(() => {",
			"        console.log('2.组件挂载页面之前执行----onBeforeMount')",
			"    })",
			"    onMounted(() => {",
			"        funcList.getInfo();",
			"        console.log('3.-组件挂载到页面之后执行-------onMounted')",
			"    })",
			"    return {",
			"        ...toRefs(state),",
			"        ...funcList",
			"    }",
			"  },",
			"}",
			"</script>",
			"<style scoped lang='scss'>\n",
			"</style>",
		],
		"description": "Log output to console"
	}	
}

2、新建.vue结尾的文件,输入vue3 有提示，生成片段