一键快速生成自定义vue3模板代码

根据上图打开配置用户代码片段

搜索vue.jsond打开

	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!-- $0 -->",
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script lang='ts'>",
			"import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'",
			"interface DataProps {}",
	   
			"export default {",
			"    name: '',",
			"      setup() {",
			"          console.log('1-开始创建组件-setup')",
			"          const data: DataProps = reactive({",
			"",
			"          })",
			"          onBeforeMount(() => {",
			"              console.log('2.组件挂载页面之前执行----onBeforeMount')",
			"          })",
			"          onMounted(() => {",
			"              console.log('3.-组件挂载到页面之后执行-------onMounted')",
			"          })",
			"          const refData = toRefs(data);",
			"          return {",
			"              ...refData,",
			"          }",
			"",
			"      }",
			"  };",
			"</script>",
			"<style scoped>",
			"</style>"
		  ],
		"description": "a vue template"
	},
	"vue3模版代码":{
		"prefix": "vue3",
		"body": [
			"<!-- vue3代码 小C学安全 -->",
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup lang='ts'>",
			"import { ref,reactive} from 'vue'",
			"</script>",
			"<style scoped>",
			"</style>"
		  ],
		"description": "a vue3 template"
	}

}

将以上代码替换并保存
打开新的组件文件

浏览器自动打开

找到 package.json 配置文件!

 "scripts": {
  "dev": "vite --open",
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
 },