在使用vue开发项目的时候，由于组件比较多，一开始的时候都是复制粘贴，做着做着觉得挺麻烦的而且效率不高，于是就思考，每个组件的template和js这块很多都是相同的，是否可以做成一个模板然后使用呢？于是上网搜索了下，在vs code中可以通过代码片段来实现。

创建用户代码片段

文件—>首选项—>用户代码片段

然后再弹出的输入框中输入vue，然后回车(Enter)，效果如下：

image.png

在vue.json中写上代码片段,代码如下：

{
    "vue-template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div>",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  name: '',",
            "  data () {",
            "    return {",
            "    }",
            "  },",
            "  methods: {}",
            "}",
            "</script>",
            "",
            "<style scoped lang=scss>",
            "",
            "</style>"
        ],
        "description": "my vue template"
    }
}

书写完之后，保存文件即可。

使用vue的代码片段

效果如图：

image.png

出现提示后，按下回车(Enter),然后就会出现想要的结果了。如下图：

image.png

最后：就可以更加愉快的使用vue做我们的项目开发了，效率又提升了。
ps: 因为我配置了sass，所以在代码片段中，style标签添加了 lang=scss属性。这个需要在webpack的配置文件中配置rule，便可以使用sass语法了。当然，还可以使用vs code创建其他框架或者语言的代码片段。