Vue属性书写顺序推荐：

为了降低代码阅读成本，同时规范化代码，这里推荐一套vue属性书写顺序：
使用方法如下，vscode编辑器，点击【文件】——【首选项】——【用户片段】——【新代码片段】，
然后输入一个命名，比如：test，然后回车，然后复制以下代码段即可。
代码片段如下：

{
	// Place your gold-mall-admin-dev 工作区 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"
  // }
  "Init vue": {
		"scope": "vue",
		"prefix": "gvue",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"\t<div class='$2'>$5</div>",
			"</template>",
			"",
			"<script>",
			"",
			"export default {",
			"\tname: '$3',",
			"\tcomponents: {},",
			"\tdirectives: {},",
			"\tfilters: {},",
			"\tmixins: [],",
			"\tmodel: {},",
			"\tprops: {},",
			"\tdata () {",
			"\t\treturn {",
			"",
			"\t\t}",
			"\t},",
			"\tcomputed: {},",
			"\twatch: {},",
			"\tbeforeCreate () {},",
			"\tcreated () {",
			"",
			"\t},",
			"\tbeforeMount () {},",
			"\tmounted () {",
			"",
			"\t},",
			"\tbeforeUpdate () {},",
			"\tupdated () {},",
			"\tactivated () {},",
			"\tdeactivated () {},",
			"\tbeforeDestroy () {},",
			"\tdestroyed () {},",
			"\t// 方法集合",
			"\tmethods: {",
			"",
			"\t}",
			"}",
			"</script>",
			"<style rel='stylesheet/scss' lang='scss' scoped>",
			"</style>"
		],
		"description": "gold_admin_vue"
	}
}

保存之后，在vue文件中，输入 gvue，然后按tab键，即可自动生成代码片段。

上述代码段中的内容有兴趣可以自行研究一下：
1、scope表示作用域，即代码段在什么文件中才生效，这里显然是vue文件才生效。
2、prefix表示前缀，即输入什么内容的时候才可出现代码段，这里我是gvue，可以自行修改。
3、$1,$2…表示代码段初始化生成之后，光标出现的默认位置，按一下tab即可自动切换到下一个$符号所在的位置。
4、description表示描述提示信息，即出现代码段时的描述信息。