1.打开VSCode,点击左下角设置图标,点击用户代码片段
2.选择新建全局代码片段文件,输入一个文件名,然后按回车键
3.将下面代码替换粘贴,之后使用 setup加 tab键就可以快速打出vue模板
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. 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": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"setup": {
"prefix": "setup",
"body": [
"<template>",
"\t<div>",
"\t",
"\t</div>",
"</template>",
"<script setup>",
"import { useRouter } from 'vue-router'",
"const router = useRouter()",
"const { ctx, proxy } = getCurrentInstance()",
"const emit = defineEmits(['update:modelValue'])",
"const props = defineProps({",
" propData: {",
" type: String,",
" default: '',",
" },",
"})",
"const {data} = toRefs(reactive({",
" //定义数组和对象",
" data:''",
" }))",
"const data2 = ref('')//定义普通类型",
"// onMounted(() => {})",
"// watch(propData,(newVal,oldVal)=>{})",
"</script>",
"",
"<style scoped>",
"\t",
"</style>"
],
"description": "vue3语法糖"
}
}