本文已参与「新人创作礼」活动，一起开启掘金创作之路。

第一步

打开vscode, 文件-首选项-用户代码片段，选择代码片段文件或创建代码片段，选择或新建vue.json

第二步

复制以下代码,保存

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!--",
			"  功能：${1:功能描述}",
			"  作者：兜兜里有糖",
			"  邮箱：麋鹿不迷路@糖.兜兜",
			"  时间：$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
			"  版本：v1.0",
			"  修改记录：",
			"  修改内容：",
			"  修改人员：",
			"  修改时间：",
			"-->",
			"<template>",
			"  <div class='${2:该组件名称}'>$5</div>",
			"</template>",
			"<script>",
			"//这里可以import(导入)其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
			"",
			"export default {",
			"  components: {/**注册组件*/},",
			"  props:{/**接受父组件传值*/ },",
			"  name:'${2:该组件名称}',",
			"  data() {",
			"    return {",
			"",
			"    };",
			"  },",
			"  computed: {/**计算属性*/ },",
			"  watch: {/**监听data数据变化*/ },",
			"  methods: {/**所有方法*/",
			"",
			"  },",
			"  created() {/**创建组件时执行(有VM对象this)*/",
			"",
			"  },",
			"  mounted() {/**加载完组件时执行(主要预处理数据)*/ },",
			"  beforeCreate() {/**生命周期 - 创建之前*/},",
			"  beforeMount() {/**生命周期 - 挂载之前*/},",
			"  beforeUpdate() {/**生命周期 - 更新之前*/},",
			"  updated() {/**生命周期 - 更新之后*/},",
			"  beforeDestroy() {/**生命周期 - 销毁之前*/},",
			"  destroyed() {/**生命周期 - 销毁完成*/},",
			"  activated() {/**keep-alive组件激活时调用。仅针对keep-alive组件有效*/ },",
			"  deactivated() {/**keep-alive组件停用时调用。仅针对keep-alive组件有效*/ },",
			"}",
			"</script>",
			"<style scoped>",
			"$4",
			"</style>"
		],
		"description": "自动生成VUE模板"
	}
}

第三步

在vscode里新建一个vue文件，在文件空白处输入vue ，按 Tab 键，即可生成完整的模板

配置vue3初始化快捷代码

1.点击设置——用户代码片段

2.新建代码片段

会生成一个xxx.code-snippets文件

3.在文件里面输入以下代码

第一种：

{
	"demo":{
		"prefix":"v3",
		"body": [
			"<template>",
			"\t",
			"</template>",
			"",
			"<script lang='ts'>",
			"import { defineComponent } from 'vue'",
			"export default defineComponent({",
			"\tsetup () {",
			"\t\t$0",
			"\t\treturn {\n",
			" ",
			"\t\t}",
			"\t}",
			"})",
			"</script>",
			" ",
			"<style lang = \"less\" scoped>",
			"\t",
			"</style>"
		],
		"description": "自定义的一个vue代码片段"
	}
}

在vue文件里面输入vue3就会快捷生成如下代码

第二种：

{
	"demo":{
		"prefix":"v3",
		"body": [
			"<template>",
			"\t",
			"</template>",
			"",
			"<script lang='ts' setup>",
			"import {  } from 'vue'",
			"\t\t$0",
			"</script>",
			" ",
			"<style lang = \"less\" scoped>",
			"\t",
			"</style>"
		],
		"description": "自定义的一个vue代码片段"
	}
}

在vue文件里面输入vue3就会快捷生成如下代码