分享一下：vue3.0在VScode的模板格式

 

 这里有三种格式：

第一种：vsc：是Vue2的模板

第二种：v3：是vue3+webpack版的模板

第三种：vi：是Vue3+vite的模板

{
	"Print to console": {
		"prefix": "vsc",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script>",
			" export default {",
			"  name: '',",
			"  data() {",
			"    return {",
			"    };",
			"  },",
			"  mounted() {",
			"  },",
			"  methods: {},",
			" };",
			"</script>",
			"",
			"<style scoped>",
			"",
			"</style>",
			"",
		],
		"description": "自定义Vue模板"
	},
	"vue3": {
		"prefix": "v3",
		"body": [
			"<template>",
			"   ",
			"</template>",
			"",
			"<script  lang=\"ts\">",

			"import { defineComponent, ref, reactive, toRefs } from 'vue';",
			
			"export default defineComponent({",
			"  name: '',",
			"  setup() {",
			"    const data = reactive({})",
			"    return {",
			"    \t...toRefs(data)",
			"    };",
			"  },",
			" });",
			"</script>",
			"",
			"<style scoped>",
			"",
			"</style>",
			"",
		],
		"description": "自定义Vue模板"
	},
	"vite-vue3": {
		"prefix": "vi",
		"body": [
			"<template>",
			"   ",
			"</template>",
			"",
			"<script setup lang=\"ts\">",

			"import { ref } from '@vue/reactivity';",
		
			"</script>",
			"",
			"<style scoped>",
			"",
			"</style>",
			"",
		],
		"description": "自定义Vue-Vite模板"
	}
	
}

说明：下面这样写的目的是为了让所有响应式变量统一写在data里面。防止乱想，提高代码整洁行，除非你使用hooks，对于很多vue2重度依赖者来说这个是很好的写法

"  setup() {",

      "    const data = reactive({})",

      "    return {",

      "    \t...toRefs(data)",

      "    };",

      "  }z