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