使用vscode快速创建vue模板

第一步：进入vscode界面，使用快捷键Ctrl+shift+p，输入sni，找到首选项：配置用户代码片段。第二步：点击首选项：配置用户代码片段，并输入html.json,并点击进入第三步：将如下代码覆盖进html.json文件中`在这里插入代码片{"vh": {"prefix": "vh", // 触发的关键字输入vh按下tab键"body": ["<!DOCT...

阑珊丶

8797人浏览 · 2019-08-22 17:27:46

阑珊丶 · 2019-08-22 17:27:46 发布

第一步：进入vscode界面，使用快捷键Ctrl+shift+p，输入sni，找到首选项：配置用户代码片段。
在这里插入图片描述
第二步：点击首选项：配置用户代码片段，并输入html.json,并点击进入

第三步：将如下代码覆盖进html.json文件中`在这里插入代码片

{
"vh": {
	"prefix": "vh", // 触发的关键字 输入vh按下tab键
	"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>",
		"    <script src=\"https://cdn.staticfile.org/vue/2.2.2/vue.min.js\"></script>",
		"</head>",
		"",
		"<body>",
		"    <div id=\"app\"></div>",
		"    <script>",
		"        var vm=new Vue({",
		"           el:'#app',",
		"           data:{},",
		"           methods:{}",
		"        });",
		"    </script>",
		"</body>",
		"",
		"</html>",
	],
	"description": "vh components"
	}
}

在这里插入图片描述
Ctrl+s保存。
第四步：创建一个新的html页面，输入vh，就会自动生成一个简单的vue模板啦

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