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，完美呈现