VScode通过代码片段自定义模板,输出vh,自动生成Vue基本模板页面
操作步骤

1.点击左下角设置图标,点击用户代码片段,

2.在弹出的输入框输入vue.json //作用:新建全局片段

3.在{}输入你自定义的代码片段如

{
	"Print to Vue&html base code": {
        "prefix": "vh",
        "body": [
            "<!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>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\">",
            "    </div>",
            "    <script src=\"./lib/vue.js\"></script>",
            "    <script>",
            "        var vm = new Vue({",
            "            el: '#app',",
            "            data: {",
            "",
            "            },",
            "            methods: {",
            "",
            "            }",
            "        });",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "Vue&html base code"
    }
	
}

4.此时在空白html中输入vh,回车,即可生成如下代码
//vh可在vue.json代码片段中自定义为其他自己喜欢的快捷键
//若未生效,可重启VScode

<!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>
</head>

<body>
    <div id="app">
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            }
        });
    </script>
</body>

</html>
Logo

前往低代码交流专区

更多推荐