在vscode中一键快速生成vue3模板代码

1.打开vscode中点击文件 - 首选项 - 用户片段

2.点击新建全局代码片段文件 - 取个名字 - vue.json

3.在vue.json.code-snippets放入下面代码 

{
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script lang='ts'>",
      "import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'",
      "interface DataProps {}",

      "export default {",
      "    name: '',",
      "      setup() {",
      "          console.log('1-开始创建组件-setup')",
      "          const data: DataProps = reactive({",
      "",
      "          })",
      "          onBeforeMount(() => {",
      "              console.log('2.组件挂载页面之前执行----onBeforeMount')",
      "          })",
      "          onMounted(() => {",
      "              console.log('3.-组件挂载到页面之后执行-------onMounted')",
      "          })",
      "          const refData = toRefs(data);",
      "          return {",
      "              ...refData,",
      "          }",
      "",
      "      }",
      "  };",
      "</script>",
      "<style scoped>",
      "</style>"
    ],
    "description": "Log output to console"
  }

4.在空白.vue文件中输入vue3 再按tab键就可以