1.打开vsCode

打开路径：

文件-->首选项-->用户代码片段-->vue.json

注意：这里的vue.json是一般系统默认的名字显示。vue.json是可以更改的，由下面的设置模板配置的"prefix": “vue"实现的。即如果下面写的是"prefix”: “vue2”，这里显示就是vue2.json。

2.vue.json设置

粘入编辑好的vue模板：

{
	"Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
        "export default {",
        "}",
        "",
      "</script>",
      "",
      "<style lang='stylus' scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Log output to console"
  }
}

3.vue.json解释及显示结果

1）prefix是用来触发代码段的内容，即是使用模板的快捷入口。

2）body是模板所需的代码。

$1，$2代表制表位，$0代表最后的光标位置。
$1 代表输入后光标的所在位置。
$2 代表输入后光标的下一位置将会另起一行，按tab键可进行快速切。
${1:label}，${2:another}代表占位符。

3）description是代码段描述

"description": "Log output to console"
//“描述”：“将输出记录到控制台”