VScode设置快速创建Vue的模板片段

博主：微风
发布时间：2021 年 07 月 22 日
558 次浏览
暂无评论
601字数
分类： Vue

步骤

文件 -> 首选项 -> 用户代码片段 -> 新建全局代码片段 ->取一个名字（vue-html.code-cnippets）

将文件中的代码替换成下面的代码片段

{
    "vue": {
        "prefix": "vue",//关键字
        "body": [//对应代码片段
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "\t<title>vueApp</title>",
            "</head>",
            "",
            "<body>",
            "\t<div id=\"app\">",
            "",
            "\t</div>",
            "\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
            "\t<script>",
            "\t\tvar app = new Vue({",
            "\t\t\tel: \"#app\",",
            "\t\t\tdata: {",
            "",
            "\t\t\t},",
            "\t\t\tmethods: {",
            "",
            "\t\t\t}",
            "\t\t});",
            "\t</script>",
            "</body>",
            "",
            "</html>"
        ],
        "description": "vue snippet"
    }
}