vscode创建一个vue简单的模板

1、打开“文件“->“首选项”-“用户代码片段”2、弹出页中选中“新代码片段”3、键入名称，例如“vue-template”,输入完成后，按下“Enter”键即可4、弹出如下页面，{}全是英文注释5、在英文注释后，{}之间，输入以下代码，保存"vue_learn_template": {"prefix": "vl",//键入快捷键"body": ["&...

风风草

2670人浏览 · 2020-04-08 11:44:53

风风草 · 2020-04-08 11:44:53 发布

1、打开“文件“->“首选项”-“用户代码片段”
在这里插入图片描述
2、弹出页中选中“新代码片段”

3、键入名称，例如“vue-template”,输入完成后，按下“Enter”键即可

4、弹出如下页面，{}全是英文注释

5、在英文注释后，{}之间，输入以下代码，保存

	"vue_learn_template": {
		"prefix": "vl",//键入快捷键
		"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=\"./lib/vue.js\"></script>",
			"</head>\n",
			"<body>",
			"\t<div id =\"app\"> </div>\n",
			"\t<script>",
			"\t //创建Vue实例,得到 ViewModel",
			"\t var vm = new Vue({",
			"\t\tel: '#app',",
			"\t\tdata: {},",
			"\t\tmethods: {}",
			"\t });",
			"\t</script>",
			"</body>\n",
			"</html>"
		],
		"description": "vue学习模板" // 模板的描述,可以自己改
	}

其中：\t " \n都是转义字符，而空格就是单纯的空格，输入时可以输入空格
\t 的意思是横向跳到下一制表符位置等于 Tab键
" 的意思是双引号
\n 的意思是回车换行
6、测试结果
新建一个空白的html，输入“vl”后，键入“Tab”键，空白的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}$/, //不连续的两位字母// /^