vs code安装扩展

1. 安装扩展 Vetur ，使得vue文件内容可以有代码高亮显示 和 提示

2. 安装Vue 2 Snippets，之后可以设置代码片段，使得组件的结构内容快速显示

   之后选取 vue.json 配置文件设置代码片段即可

   步骤：vscode—>设置 --> user snippets ----> 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": "log",
	"body": [
	 "console.log('$1')",
	 "$2"
	],
	"description": "Log output to console"
},

"Create vue template": {
	"prefix": "vuec",
	"body": [
	 "<template>",
	 "    <div>$1</div>",
	 "</template>",
	 "",
	 "<script>",
	 "export default {",
	 "}",
	 "</script>",
	 "",
	 "<style lang=\"less\" scoped>",
	 "</style>",
	 "",
	],
	"description": "Create vue template"
}

}## vscode安装扩展

vscode安装扩展