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

1111111.jpg

2.此時(shí)可以選擇一個(gè)已有的vue.json進(jìn)行修改， 或者輸入別的名字新建

222222222.jpg

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

3333333333.jpg

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

4 代碼片段模版

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

5.測(cè)試：新建vue頁(yè)面，輸入vue顯示如下

1629268835(1).png