vscode配置vue代码模板

在开发vue项目过程中，我们需要经常创建.vue的组件文件，这时候就要一遍遍的重写vue组件模板代码，相信大家都有遇到这个问题。现在不需要大家一遍遍写组件模板或者复制粘贴了，只需要在vscode中配置一遍就可全程通用。话不多说，正文由此开始。

1.首先在你的vscode创建个新文件，敲上你想要的组件模板

<template>
    <div class=""></div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
</style>

 2. 打开配置生成地址，把你的模板复制到左侧your snippet里面，右侧就会生成配置模版。点击这里。​​​​​​

 3.复制配置模板，在vscode点击左上角文件 >> 首选项 >> 用户片段，然后输入vue.json,打开该文件，把刚才的模板放到这里。

 

 这时候就配置完成了。

测试下，新建个页面然后输入vue 回车就自动生成模板了，是不是很简单，接下来开发项目就轻松很多了。