vscode

步骤一:

步骤二:

找到图中的地方就可以编辑自己喜欢的模版啦 附上一份代码示例:

// {
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
// "Print to console": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }
// }
{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"<div class='$2'>$5</div>",
			"</template>",
			"",
			"<script>",
			"",
			"export default {",
			"components: {},",
			"data() {",
			"return {",
			"",
			"};",
			"},",
			"computed: {},",
			"watch: {},",
			"created() {",
			"",
			"},",
			"mounted() {",
			"",
			"},",
			"methods: {",
			"",
			"},",
			// "beforeCreate() {}, //生命周期 - 创建之前",
			// "beforeMount() {}, //生命周期 - 挂载之前",
			// "beforeUpdate() {}, //生命周期 - 更新之前",
			// "updated() {}, //生命周期 - 更新之后",
			// "beforeDestroy() {}, //生命周期 - 销毁之前",
			// "destroyed() {}, //生命周期 - 销毁完成",
			// "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
			"}",
			"</script>",
			"<style lang='scss' scoped>",
			// "//@import url($3); 引入公共css类",
			"$4",
			"</style>"
		],
		"description": "Log output to console"
	}
}