基於VSCode的vue單文件組件模板設置---一次設置，可爽終生

第一步：

第二步：

 第三步：

打開vue.json文件後，若是是初次設置，應該以下圖所示，綠色註釋部分不用管，注意那兩個白色大括號

 第四步：在大括號內所有粘貼以下代碼，保存便可完成vue模板的設置

"Print to vue": {

  "prefix": "vue",

  "body": [

   "<template>",

   "  <div></div>",

   "</template>",

   "",

   "<script>",

   "export default {",

   "  name: '',",

   "  data () {",

   "    return {}",

   "  },",

   "  created () {},",

   "  // mounted () {},",

   "  computed: {},",

   "  watch: {},",

   "  methods: {}",

   "}",

   "</script>",

   "",

   "<style lang=\"\" scoped>",

   "",

   "</style>",

   ""

  ],

  "description": "快速建立vue單文件組件"

 }

第五步：，每次建立完後綴爲.vue的文件後，就能夠經過在文件中輸入vue來觸發配置模板

 第六步：效果圖以下

提醒：

這裏須要先註釋掉mounted(){}生命週期方法，等使用時再打開註釋便可，一個裏面什麼也不定義的空mounted(){}在運行時會報錯

第七步：

特別說明：複製粘貼的代碼中一些屬性的做用

Print to vue：不用管它，沒什麼用

prefix：觸發模板的指令，可自行設置

body：所配置的模板內容

description：對模板的描述，可自行設置

注意：

輸出敏感字符"，應該\"，加個反斜槓

輸出敏感字符$，應該\\$

 

但願能幫到上進可愛的你，完。