（英文版）VScode一鍵生成.vue模板

1. 安裝vscode,官網地址

2.安裝一個插件，識別vue文件

插件庫中搜索Vetur，下圖中的第一個，點擊安裝（Install）

3.新建代碼片段

點擊Code(代碼)-Preferences（首選項）-User Snippers（用戶代碼片段）

4. 搜索框中輸入：vue.json.

• 如果可以搜到vue.json，請把下列代碼粘貼進該文件中。

{
    "Print to console": {
            "prefix": "vue",
            "body": [
                    "<template>",
                    " <div>\n",
                    " </div>",
                    "</template>\n",
                    "<script>",
                    " export default {",
                    "   data () {",
                    "     return {\n",
                    "     }",
                    "   },",
                    "   components: {\n",
                    "   }",
                    " }",
                    "</script>\n",
                    "<style>\n",
                    " ",
                    "</style>",
                    "$2"
            ],
            "description": "Log output to console"
    }
}

 

• 如果搜索不到vue.json文件，請新建文件，命名為vue.json。

　　　　以我的為例，原本是沒有vue.json文件的，點擊vue-html.json文件，把下列代碼粘貼進該文件中         

{
    "Print to console": {
            "prefix": "vue",
            "body": [
                    "<template>",
                    " <div>\n",
                    " </div>",
                    "</template>\n",
                    "<script>",
                    " export default {",
                    "   data () {",
                    "     return {\n",
                    "     }",
                    "   },",
                    "   components: {\n",
                    "   }",
                    " }",
                    "</script>\n",
                    "<style>\n",
                    " ",
                    "</style>",
                    "$2"
            ],
            "description": "Log output to console"å
    }
}

　　　　輸入快捷鍵：ctrl+shift+s（另存為），取名vue.json

5. 上面代碼中的 "prefix": "vue", 就是快捷鍵；保存好之后，新建.vue結尾的文件試試

輸入vue，按tab鍵，即可一鍵生成vue模板。