vscode中快速生成vue3模板

vscode中快速生成vue3模板

可以根据实际情况修改，有用记得点赞
1.首先在vscode编辑器中

文件–>首选项–>用户片段–>点击新建代码片段–取名vue.json 确定

2.把下列代码放进去

{
	"Print to console": {
		"prefix": "vue3",
		"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": "Log output to console"
	}
}

3.新建.vue结尾的文件,输入vue3 按键盘的tab自动生成模板

<!--  -->
<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>

参考网址：

https://blog.csdn.net/qq_43373320/article/details/110368849