vscode编辑器vue-cli用户代码提示片段

1、打开vscode编辑菜单首选项，选择用户片段

2、选择新建全局代码片段

3、新建的代码片段命名为vue.json，在新建后的vue.json文件里粘贴以下代码

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"	<div class='$2'>",
            "$4",
            "   </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"	components: {",
			"$4",
			"	},",
			"	data() {",
			"		return {",
			"$4",
			"		};",
			"	},",
			"	computed: {",
			"$4",
			"	},",
			"	watch: {",
			"$4",
			"	},",
			"	//生命周期 - 创建之前",
			"	beforeCreate() {",
			"$4",
			"	},",
			"	//生命周期 - 创建完成（可以访问当前this实例）",
			"	created() {",
			"$4",
			"	},",
			"	//生命周期 - 挂载之前",
			"	beforeMount() {",
			"$4",
			"	},",
			"	//生命周期 - 挂载完成（可以访问DOM元素）",
			"	mounted() {",
			"$4",
			"	},",
			"	//如果页面有keep-alive缓存功能，这个函数会触发",
			"	activated() {",
			"$4",
			"	},",
			"	//生命周期 - 更新之前",
			"	beforeUpdate() {",
			"$4",
			"	},",
			"	//生命周期 - 更新之后",
			"	updated() {",
			"$4",
			"	},",
			"	//生命周期 - 销毁之前",
			"	beforeDestroy() {",
			"$4",
			"	},",
			"	//生命周期 - 销毁完成",
			"	destroyed() {",
			"$4",
			"	},",
			"	methods: {",
			"$4",
			"	}",
			"}",
			"</script>",

			"<style lang='scss' scoped>",
			"$4",
			"</style>"
		],
		"description": "Log output to console"
	}
}