VScode配置置Vue代码片段

1. 安装Vetur插件
   在插件中心搜索安装即可
2. 配置代码模板
   文件(File) ➡ 首选项 (Preference)➡ 用户代码片段(User Snippets) ➡ 点击新建全局代码片段(New Global Snippets file) ➡ 取名 vue(输入vue) ➡ 确定
3. 代码片段

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "   <div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "// 导入组件、工具js、第三方插件、json文件、图片文件等等",
            "// 定义Vue常量",
            "export default {",
            "   //import引入的组件需要注入到对象中才能使用",
            "   components: {},",
            "   data() {",
            "       //vue数据以及表单校验rules区域",
            "       return {",
                        "",
            "       };",
            "   },",
            "   //computed方法",
            "   computed: {},",
            "   //监听器",
            "   watch: {},",
            "   //方法区",
            "   methods: {",
                    "",
            "   },",
            "   //钩子函数 - 创建完成（可以访问当前this实例）",
            "   created() {},",
            "   //钩子函数 - 挂载完成（可以访问DOM元素）",
            "   mounted() {},",
            "   beforeCreate() {}, //钩子函数 - 创建之前",
            "   beforeMount() {}, //钩子函数 - 挂载之前",
            "   beforeUpdate() {}, //钩子函数 - 更新之前",
            "   updated() {}, //钩子函数 - 更新之后",
            "   beforeDestroy() {}, //钩子函数 - 销毁之前",
            "   destroyed() {}, //钩子函数 - 销毁完成",
            "   activated() {} //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "/* @import url($3); 引入公共css类 */",
            "$4",
            "</style>"
        ],
        "description": "vue模板"
    }
}

4. 使用片段
   在新建的vue文件中直接输入vue然后点击回车即可生产模板内容