vscode自动生成vue文件模板

只需输入“vue”，点击回车，就可以生成你配置好的文件！

点击“文件 --》首选项 --》用户片段/用户代码片段，在输入栏输入”vue.json“（选择全局），没有的话就新建

在文件夹中输入如下：

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
		"Print to console": {
		"prefix": "vue",
		"body": [
		"<!--",
		"  功能：${1:功能描述}",
		"  作者：不是程序媛",
		"  邮箱：",
		"  时间：$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
		"  版本：v1.0",
		"  修改记录：",
		"  修改内容：",
		"-->",
		"<template>",
			"<div></div>",
		"</template>",
		"",
		"<script>",
		"// import导入组件工具等",
		"export default {",
		"  data () {",
		"    return {}",
		"  },",
		"  // 组件方法",
		"  methods: {},",
		"  // 计算属性",
		"  computed: {},",
		"  // 侦听器",
		"  watch: {},",
		"  // import的组件需要声明",
		"  components: {},",
		"}",
		"</script> ",
		"",
		"<!-- Add \"scoped\" attribute to limit CSS to this component only -->",
		"<style scoped>",
		"",
		"</style>",
		"$2"
		],
		"description": "Log output to console"
		}
}

在vue文件中输入vue即可生成代码啦。

VUE项目配置篇1

vscode自动生成vue文件模板