自定义配置vscode快捷生成vue模板 代码

步骤:

文件–>首选项—>用户代码片段
新建全局json 文件 命名为 vue.json

复制以下代码

{
	// 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": [
					"<template>",
					"    <div class=\"$2\">$5</div>",
					"</template>",
					"",
					"<script>",
					"",
					"export default {",
					"    components: {},",
					"    data() {",
					"        return {",
					"",
					"        };",
					"    },",
					"    computed: {},",
					"    watch: {},",
					"    methods: {},",
					"    created() {},",
					"    mounted() {},",
					"    beforeCreate() {},",
					"    beforeMount() {},",
					"    beforeUpdate() {},",
					"    updated() {},",
					"    beforeDestroy() {},",
					"    destroyed() {},",
					"    activated() {},",
					"    }",
					"</script>",
					"<style lang='scss' scoped>",
					"//@import url($3); 引入公共css类",
					"$4",
					"</style>"
			],
			"description": "Log output to console"
	}

}

使用

新建的.vue 文件中 直接输入 vue然后点击tab 键即可