根据vue基础模板文件生成代码

使用vscode编写vue文件的时候，每次都需要输入,,这些标签，浪费我们的时间，
如何使用简写键盘敲出vue就会出现如下代码段

<template>

</template>
<script>
export default {
   name:'',
}
</script>
<style scoped>

</style>

或者键盘敲出app就会出现如下代码段

const app = new Vue({
        el: '#app',
        data: {
        
        },
        methods: {
        
        }
        })

就可以节省很多重复代码的时间
下面就讲下使用方法。

1.vue简写方法

• 安装Vetur插件扩展让VScode支持.vue文件名
  

• 点击左下角菜单栏也就是小齿轮的图标
  

• 点击用户代码片段
  

• 你可以选择现有代码片段vue.json或者是新代码片段都可以
  两者的区别在于

1.新建全局代码片段的好处就是，在非vue文件中输入vue命令都能新建出vue初始化代码模板。

2.如果是vue.json文件中定义初始化代码模板的话，就只能在.vue文件中vue命令才会有效。

• 进去之后如图所示在箭头地方新增一段如下代码
  

• 直接复制以下代码至上图箭头处

"Vue Init":{
        "prefix": "vue",
        "description": "初始化Vue单文件组件模板",
        "body": [
            "<template>",
            "$1",
            "</template>",
            "<script>",
            "export default {",
            "   name:'$2',",
            "}",
            "</script>",
            "<style scoped>",
            "$3",
            "</style>",
            ""
        ]
    }

• 最后保存该文件并新建一个.vue文件首行输入vue按下enter即可，效果如下
  
  同理app的模板简写也是一样的方法，在刚才的文件下继续输入如下代码保存即可

	"Print to app": {
		"scope": "javascript,typescript",
		"prefix": "app",
		"body": [
			"const app = new Vue({",
			"el: '#app',",
			"data: {",
			"",
			"},",
			"methods: {",
			"",
			"}",
			"})"
		],
		"description": "Log output to console"
	}