VScode中Vue快速生成代码片段

首先我们要找到设置（如下图）用户代码片段然后我们会看到这样一个框，然后搜索html.json如果没设置过就是一些注释掉的东西可以全部删除复制下面的代码就可以了{"vue代码": {"prefix": "ve","body": ["<!DOCTYPE html>","","<html lang='en'>","<head>"...

码知秋

12851人浏览 · 2018-11-06 10:14:10

码知秋 · 2018-11-06 10:14:10 发布

首先我们要找到设置（如下图）用户代码片段

然后我们会看到这样一个框，然后搜索html.json

如果没设置过就是一些注释掉的东西可以全部删除复制下面的代码就可以了

{"vue代码": {
"prefix": "ve",
"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=\"../node_modules/vue/dist/vue.min.js\"></script>",
	"</head>",
	"",
	"<body>",
    "\t<div class=\"container\">",

	"\t</div>",


    "\t<script>",
	" \t\tvar vue = new Vue({",
		"\t\t\tel : '.container',",     
		"\t\t\tdata : {  }," ,         
		"\t\t\tmethods : { }    "  ,   
        "\t\t});",
		"\t</script>",
		"</body>",
		"",
		"</html>"
	]
	}
}

注意：这里的vue的引用用的是我的地址，你们的路径按照自己的文件位置引用

单页面请用下面的代码片段

注意：找到第一步操作，搜索vue.json 复制下面代码

{
    "Print to console": {
        "prefix": "cvue",
        "body": [
            "<style lang='$2' scoped>",
            "",
            "",
            "</style>",
            "",
            "<template>",
            "    <div>",
            "       $3",
            "    </div>",
            "</template>",
            "",
            "<script>",
            "   export default {",
            "      data() {",
            "          return {",
            "",
            "          }",
            "      },",
            "      methods: {",
            "",
            "",
            "      },",
            "      //生命周期 - 创建完成",
            "     created(){ ",
            "       ",
            "     },",
            "",
            "     //DOM挂载完毕",
            "     mounted() {",
            "",
            "     }",
            " }",
            "</script>"
        ]
    }
}

单页面中的$1 $2 表示创建光标的位置，可按Tab切换位置，prefix的名字可随意更改

在页面输入ve （名字可以自定义）敲击回车就可以看到已经创建好了的代码结构

<!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'>
    <titledocument</title>
    <script src='../node_modules/vue/dist/vue.min.js'></script>
</head>

<body>
    <div class='container'>
    </div>
    <script>
        var vue = new Vue({
            el: '.container',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

以上就是快速生成vue结构的代码块段

想看更多点击我的博客

推荐：npm全局安装和本地安装及卸载

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}$/, //不连续的两位字母// /^