预置.vue文件模版

在使用Vue.js开发SPA时，需要大量的.vue后缀的文件，每个文件都由<template>、<script>、<style>组成，如果每次新建都手动的书写，那无疑会浪费大量的时间。VSCode提供相应的插件支持配置模版信息，步骤如下：

1. 先安装Vetur 扩展 让 VSCode 支持 .vue 的扩展名
2. 然后菜单栏 - Code - 首选项 - 用户代码片段，选择``` vue````
3. 编辑vue.json，新增属性Vue Init，代码如下(部分代码省略)：

{
    ...
     "Vue Init": {
        "prefix": "vue",
        "description": "初始化Vue单文件组件模版",
        "body": [
            "<template>",
            "$1",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  name: '$2',",
            "  data() {",
            "    return {",
            "      ",
            "    };",
            "  },",
            "}",
            "</script>",
            "",
            "<style lang=\"scss\" scoped>",
            "$3",
            "</style>",
            ""
        ]
    }
   ...
}

4. 新建.vue文件，输入vue，按TAB键，即可生成上述的代码片段，效果如下：
   屏幕快照 2018-07-01 下午4.01.07.png

这样就完成了.vue文件预置模版的功能。
注意：在第三步中可以修改对应的模版信息，如：<style>的lang属性可以改为开发时使用的css预编译语言less、stylus等。