手把手教你vscode如何生成Vue的代码片段

在实际开发中，使用代码片段可以有效的提高开发效率，本文章教你如何从生成到使用 Vue的代码片段：

1. 按快捷键 ctrl + shift + p

2. 在输入框中输入snippets
   

3. 接着输入vue回车打开代码片段配置页
   

如果输入vue.json没有该词条，可以下载一个VueHelper插件

5. 将以下代码复制进去

{
	"Print to console": {
	 "prefix": "vue",
	 "body": [
		 "<template>",
		 "  <div>\n",
		 "  </div>",
		 "</template>\n",
		 "<script>",
		 "export default {",
		 "  data () {",
		 "    return {\n",
		 "    }",
		 "  },",
		 "  created () {\n",
		 "  },",
		 "  mounted () {\n",
		 "  },",
		 "  methods: {\n",
		 "  }",
		 "}",
		 "</script>\n",
		 "<style scoped lang=\"${1:less}\">\n",
		 "</style>\n",
	 ],
	 "description": "Create vue template"
 }
}

不使用less开发的可以省略 scoped lang="${1:less}"代码

5. 在vue文件中输入 vue 然后按下tab键即可生成代码片段。