Vscode生成vue模板

1.打开vscode，在文件--》首选项--》用户片段中找到 vue.json

2.将vue.json中的内容替换成下面的内容

{
  "vh": {
    "prefix": "vh", // 触发的关键字 输入vh按下tab键,可以是任何关键字
    "body": [
      "<!-- $1 -->",
      "<template>",
      "<div class='$2'>$5</div>",
      "</template>",
      "",
      "<script>",
      "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
      "//例如：import 《组件名称》 from '《组件路径》';",
      "",
      "export default {",
      "//import引入的组件需要注入到对象中才能使用",
      "components: {},",
      "data() {",
      "//这里存放数据",
      "return {",
      "",
      "};",
      "},",
      "//监听属性 类似于data概念",
      "computed: {},",
      "//监控data中的数据变化",
      "watch: {},",
      "//方法集合",
      "methods: {",
      "",
      "},",
      "//生命周期 - 创建完成（可以访问当前this实例）",
      "created() {",
      "",
      "},",
      "//生命周期 - 挂载完成（可以访问DOM元素）",
      "mounted() {",
      "",
      "},",
      "beforeCreate() {}, //生命周期 - 创建之前",
      "beforeMount() {}, //生命周期 - 挂载之前",
      "beforeUpdate() {}, //生命周期 - 更新之前",
      "updated() {}, //生命周期 - 更新之后",
      "beforeDestroy() {}, //生命周期 - 销毁之前",
      "destroyed() {}, //生命周期 - 销毁完成",
      "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
      "}",
      "</script>",
      "<style lang='scss' scoped>",
      "//@import url($3); 引入公共css类",
      "$4",
      "</style>"
    ],
    "description": "vh components"
  }
}

3.新建一个vue页面，输入vh按tab键或者回车键，效果如下：

4.无法显示的话，在右下角将语言改为vue语言