vue2 和 vue3 vscode 用户代码片段配置

vue2 和 vue3 vscode 用户代码片段配置，个人编辑版本

{
  "Print to console": {
    "prefix": "vue2",
    "body": [
      "<!-- $1 -->",
      "<template>",
      "  <div class=\"$2\">$5</div>",
      "</template>",
      "",
      "<script>",
      "// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
      "// 例如：import 《组件名称》 from '《组件路径》';",
      "",
      "export default {",
      "  // import引入的组件需要注入到对象中才能使用",
      "  components: {},",
      "  name: 'index',",
      "  //props: {",
      "  //  handA: {",
      "  //    type: String,",
      "  //    required: true",
      "  //    default: '100'",
      "  //  }",
      "  //},",
      "  data() {",
      "    // 这里存放数据",
      "    return {",
      "      ",
      "    };",
      "  },",
      "  // 监听属性 类似于data概念",
      "  computed: {},",
      "  // 监控data中的数据变化",
      "  watch: {},",
      "  // 方法集合",
      "  methods: {",
      "    ",
      "  },",
      "  // 生命周期 - 创建完成（可以访问当前this实例）",
      "  created() {",
      "    ",
      "  },",
      "  // 生命周期 - 挂载完成（可以访问DOM元素）",
      "  mounted() {",
      "  ",
      "  },",
      "  beforeCreate() {}, // 生命周期 - 创建之前",
      "  beforeMount() {}, // 生命周期 - 挂载之前",
      "  beforeUpdate() {}, // 生命周期 - 更新之前",
      "  updated() {}, // 生命周期 - 更新之后",
      "  beforeDestroy() {}, // 生命周期 - 销毁之前",
      "  destroyed() {}, // 生命周期 - 销毁完成",
      "  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发",
      "  }",
      "</script>",
      "<style lang='less' scoped>",
      "//  @import url($3); 引入公共css类",
      "$4",
      "</style>"
    ],
    "description": "Log output to console"
  },
  "vue template": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script lang=\"ts\" setup>",
      "import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineProps, defineEmits, defineExpose } from 'vue'",
      "//type Props = {",
      "//   title?: string,",
      "//   data?: number[]",
      "//}",
      "// 下面的是定义获取父组件传过来的参数 withDefaults 是ts写法，第二个参数是定义默认值",
      "//withDefaults(defineProps<Props>(), {",
      "//   title: 'title',",
      "//   data: () => [1, 2, 3]",
      "//})",
      "// 下面是获取组件实例的，不可用于替代选项式api里面的this",
      "//const {proxy} : any = getCurrentInstance()",
      "onMounted(() => {",
      "})",
      "// 下面是定义调用父组件的下穿的方法的",
      "// const emit = defineEmits<{",
      "//     (e: 'on-click', name: string): void",
      "// }>()",
      "// 下面是暴露数据或者方法给父组件使用",
      "//defineExpose({",
      "//    list",
      "//})",
      "// 下面是获取子组件ref ts写法",
      "//const child = ref<InstanceType<typeof childref>>()",
      "</script>",
      "<style lang=\"less\" scoped>",
      "</style>",
    ],
    "description": "Log output to console"
  }
}