（英文版）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"
    }
}

View Code

 

• 如果搜索不到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"å
    }
}

View Code

　　　　输入快捷键：ctrl+shift+s（另存为），取名vue.json

5. 上面代码中的 "prefix": "vue", 就是快捷键；保存好之后，新建.vue结尾的文件试试

输入vue，按tab键，即可一键生成vue模板。