vscode 建立vue模板

（确保编辑器已经安装了插件 vetur、vueHelper）
一、ctrl+shift+p 输入snippets 选中它 输入vue》vue.json
二、或者操做 文件》首选项》用户代码片断》vue》vue.json

复制以下 也可自由编辑

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "",
            "// 导入的其余文件 例如：import moduleName from 'modulePath';",
            "",
            "export default {",
                "",
                "//import所引入的组件注册",
                "components: {",
                    "",
                "},",
                "",
                "data() {",
                "  return {",
                        "",
                 "  };",
                "},",
                "",
                "//监听属性",
                "computed: {",
                    "",
                "},",
                "",
                "//监控data中的数据变化",
                "watch: {",
                    "",
                "},",
                "",
                "//方法集合",
                "methods: {",
                    "",
                "},",
                "",
                "//生命周期 - 组件实例刚被建立",
                "beforeCreate() { ",
                    "",
                "},",

                "//建立完成 访问当前this实例",
                "created() {",
                    "",
                "},",
                "//挂载以前",
                "beforeMount() { ",
                    "",
                "},",

                "//挂载完成 访问DOM元素",
                "mounted() {",
                    "",
                "},",
                
                "//更新以前",
                "beforeUpdate() { ",
                    "",
                "},",
                
                "//更新以后",
                "updated() { ",
                    "",
                "},",

                "//for keep-alive 缓存功能，组件被激活时调用",
                "activated() {",
                    "",
                "},",

                "//for keep-alive 组件被移除时调用",
                "deactivated() {",
                    "",
                "},",

                "//组件销毁以前调用",
                "beforeDestroy() {",
                    "",
                "},",

                "//组件销毁以后调用",
                "destroyed() {",
                    "",
                "},",
                
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "//@import url($3); 引入公共css类",
                "$4",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

最后 ：保存 而后新建 .vue文件 ，若是新建的页面啥都没有 在这个页面输入 vue 回车 OK