vsc-快速创建vue模板

原文链接：https://www.cnblogs.com/ysmc/p/16054432.html

文件-->首选项-->用户片段-->输入“vue”

输入以下内容

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "  <div>$5</div>",
            "</template>",
            "",
            "<script>",
            "// import",
            "export default {",
            "  // 注册",
            "  components: {},",
            "  // 定义变量",
            "  data() {",
            "    return {}",
            "  },",
            "  // 计算属性 当里面的数据发生变化时，会自动触发重新计算",
            "  computed: {},",
            "  // 监控data中的变量变化",
            "  watch: {},",
            "  // 方法集合",
            "  methods: {},",
            "  // --------------------------- 生命周期 start -----------------------------------",
            "  // 创建完成（可以访问当前this实例）",
            "  created() {},",
            "  // 挂载完成（可以访问DOM元素）",
            "  mounted() {},",
            "  // 创建之前",
            "  beforeCreate() {},",
            "  // 挂载之前",
            "  beforeMount() {},",
            "  // 更新之前",
            "  beforeUpdate() {},",
            "  // 更新之后",
            "  updated() {},",
            "  // 销毁之前",
            "  beforeDestroy() {},",
            "  // 销毁完成",
            "  destroyed() {},",
            "  // --------------------------- 生命周期 end -----------------------------------",
            "  // 如果页面有keep-alive缓存功能，这个函数会触发",
            "  activated() {}",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "// @import url($3) 引入公共css类",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

当我们创建vue文件后，直接输入 vue 然后按 tab，完美呈现