10vue学习——利用VScode快速创建html模板

我们在做项目的时候，有时候会需要用到很多次相同的代码，这样子多次的编写相同的代码不止浪费时间，还特别的枯燥无味。这时候我们就会想要编写一份可以多次利用的模板，接下来让我们来看看怎么做吧！

0563xixi

4454人浏览 · 2019-07-24 11:09:58

0563xixi · 2019-07-24 11:09:58 发布

10vue学习——利用VScode快速创建html模板

前言

我们在做项目的时候，有时候会需要用到很多次相同的代码，这样子多次的编写相同的代码不止浪费时间，还特别的枯燥无味。这时候我们就会想要编写一份可以多次利用的模板，接下来让我们来看看怎么做吧！

步骤

（1）按 Ctrl + Shift + P 键后弹出搜索框——>在搜索框中输入 snippet ——>选择“首选项：配置用户代码片段”——>选择输入框下面的选项（新建全局/特定文件夹下的代码片段文件）——>在输入框输入自定义的文件名后按enter键生成文件。结果如下图：

在这里插入图片描述

（2）在生成的文件中将下面的代码复制进去

{
	"h5 sample": {
		"prefix": "len",
		"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>$0</title>",
			"</head>",
			"<body>",
				"\t<div class=\"body\">",
				"\t</div>",
				"\t<script src=\"../lib/vue-2.4.0.js\"></script>",
				"\t<script>",
					"\t\tlet vm = new Vue({",
						"\t\t\tel:\".body\",",
						"\t\t\tdata:{",
						"\t\t\t},",
						"\t\t\tmethods:{",
						"\t\t\t},",
					"\t\t})",
				"\t</script>",
			"</body>",
			"</html>"
		  
		],
		"description": "The full sample code - html5."
	  }

结果如下：
在这里插入图片描述

（1）prefix 中的值是你自定义的，当你输入该值后按tab键时就会自动生成该模板
（2）$0 是创建完毕之后光标所在的位置，便于自己编写个性化的字段

（3）新建一个html文件，输入prefix中自定义的值，如我的是“len”，后按tab键便会自动生成相关代码了：

在这里插入图片描述

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