1. 首先在vscode编辑器中打开，【文件】–>【首选项】–>【用户片段】–>【新代码片段】–> 取名vue.json 确定

2. 把下列代码放进去

{
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'",
      "export default {",
      "  name: '',",
      "  setup() {",
      "    console.log('1-开始创建组件-setup')",
      "    const data = reactive({})",
      "    onBeforeMount(() => {",
      "      console.log('2.组件挂载页面之前执行----onBeforeMount')",
      "    })",
      "    onMounted(() => {",
      "      console.log('3.-组件挂载到页面之后执行-------onMounted')",
      "    })",
      "    return {",
      "      ...toRefs(data),",
      "    }",
      "  },",
      "}",
      "",
      "</script>",
      "<style scoped lang='less'>",
      "</style>",
      
  ],
    "description": "Log output to console"
  }
}

3. 新建.vue结尾的文件,输入vue3 按键盘的TAB即可自动生成模板，省心省力！

<template>
  <div></div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
export default {
  name: '',
  setup() {
    console.log('1-开始创建组件-setup')
    const data = reactive({})
    onBeforeMount(() => {
      console.log('2.组件挂载页面之前执行----onBeforeMount')
    })
    onMounted(() => {
      console.log('3.-组件挂载到页面之后执行-------onMounted')
    })
    return {
      ...toRefs(data),
    }
  },
}

</script>
<style scoped lang='less'>
</style>