1.首先打開vscode, 文件-首選項-用戶代碼片段，

1111111.jpg

2.此時可以選擇一個已有的vue.json進行修改， 或者輸入別的名字新建

222222222.jpg

3.打開后把原有的代碼注釋

3333333333.jpg

3、輸入以下代碼：當你輸入vue的時候，可以快速生成代碼片段
備注：配置沒有生效重啟軟件 "prefix": "vue4", 為輸入名稱

4 代碼片段模版

{ 
  "Print to console": {
  "prefix": "vue4",
  "body": [
  "<!--",
  "  作者：yanggang",
  "  郵箱：1141950132@qq.com",
  "  時間：$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
  "  版本：v1.0",
  "  修改記錄：",
  "  修改內(nèi)容：",
  "  修改人員：",
  "  修改時間：",
  "-->",
  "<template>",
  "  <div>\n",
  "  </div>",
  "</template>\n",
  "",
  "<script>",
  "export default {",
  "  props: {},",
  "  components: {},",
  "  data () {",
  "    return {}",
  "  },",
  "  computed: {},",
  "  watch: {},",
  "  methods: {},",
  "  // 以下是生命周期鉤子   注：沒用到的鉤子請自行刪除",
  "  beforeCreate () {",
  "  },",
  "  /**",
  "  * 組件實例創(chuàng)建完成，屬性已綁定，但DOM還未生成，$ el屬性還不存在",
  "  */",
  "  created () {",
  "  },",
  "  /**",
  "  * 在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。",
  "  */",
  "  beforeMount () {",
  "  },",
  "  mounted () {",
  "  },",
  "  beforeUpdate () {",
  "  },",
  "  updated () {",
  "  },",
  "  /**",
  "  * keep-alive 組件激活時調(diào)用。 僅針對keep-alive 組件有效",
  "  */",
  "  activated () {",
  "  },",
  "  /**",
  "  * keep-alive 組件停用時調(diào)用。 僅針對keep-alive 組件有效",
  "  */",
  "  deactivated () {",
  "  },",
  "  /**",
  "  * 實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。",
  "  */",
  "  beforeDestroy () {",
  "  },",
  "  destroyed () {",
  "  }",
  "}",
  "</script> ",
  "",
  "<style scoped lang=\"${1:less}\">\n",
  "",
  "</style>",
  "$2"
         ],
  "description": "Log output to console"
     }
 }

5.測試：新建vue頁面，輸入vue顯示如下

1629268835(1).png