【vscode】自定义vue模板（快捷输入方式!v）

1|0步骤

这样打开了一个json文件
更改整个文件的内容如下

2|0html.json代码

{
    // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    // 	"prefix": "log",
    // 	"body": [
    // 		"console.log('$1');",
    // 		"$2"
    // 	],
    // 	"description": "Log output to console"
    // }

    // 	\t \" \n都是转义字符，而空格就是单纯的空格，输入时可以输入空格
    // \t 的意思是 Tab键（横向跳到下一制表符位置） 
    // \" 的意思是 双引号
    // \n 的意思是回车换行

    "vue_learn_template": {
        "prefix": "!v", //触发标志
        "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<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "\t<title>Document</title>",
            "\t<script src=\"vue.js\"></script>",
            "</head>\n",
            "<body>",
            "\t<div id =\"app\"> \n",

            "\t</div>\n",
            "\t<script>",
            "\t var area = new Vue({",
            "\t\tel: \"#app\",",
            "\t\tdata: {},",
            "\t\tmethods: {}",
            "\t });",
            "\t</script>",
            "</body>\n",
            "</html>"
        ],
        "description": "vue学习时创建文件的模板" // 模板的描述
    }
}

3|0生成模板样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id ="app"> 

    </div>

    <script>
     var area = new Vue({
        el: "#app",
        data: {},
        methods: {}
     });
    </script>
</body>

</html>

__EOF__

本文作者：ice猫猫3
本文链接：https://www.cnblogs.com/icemiaomiao3/p/14628840.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！