在使用Vue.js开发SPA时，需要大量的.vue后缀的文件，每个文件都由<template>、<script>、<style>组成，如果每次新建都手动的书写，那无疑会浪费大量的时间。VSCode提供相应的插件支持配置模版信息，步骤如下：
- 先安装
Vetur扩展 让 VSCode 支持 .vue 的扩展名 - 然后
菜单栏 - Code - 首选项 - 用户代码片段，选择``` vue```` - 编辑
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>",
""
]
}
...
}
- 新建.vue文件，输入
vue，按TAB键，即可生成上述的代码片段，效果如下：
屏幕快照 2018-07-01 下午4.01.07.png
这样就完成了.vue文件预置模版的功能。
注意：在第三步中可以修改对应的模版信息，如：<style>的lang属性可以改为开发时使用的css预编译语言less、stylus等。
