VScode快捷键vh快速生成Vue基本页面

最新推荐文章于 2024-05-17 09:28:01 发布

AONLY_

最新推荐文章于 2024-05-17 09:28:01 发布

阅读量2.8k

点赞数 6

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_43560646/article/details/116505396

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

AONLY_

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
VScode快捷键vh快速生成Vue基本页面

VScode通过代码片段自定义模板，快速生成Vue页面操作步骤1.点击左下角设置图标，点击用户代码片段，2.在弹出的输入框输入vue.json //作用：新建全局片段3.在{}输入你自定义的代码片段如{ "Print to Vue&html base code": { "prefix": "vh", "body": [ "<!DOCTYPE html>", "<html lang=\"en
复制链接

扫一扫