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

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

AONLY_

2928人浏览 · 2021-05-07 23:47:51

AONLY_ · 2021-05-07 23:47:51 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^