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

最新推荐文章于 2024-05-17 09:28:01 发布

0563xixi

最新推荐文章于 2024-05-17 09:28:01 发布

阅读量4.4k

点赞数 13

本文链接：https://blog.csdn.net/weixin_42530160/article/details/97107873

版权

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键便会自动生成相关代码了：

在这里插入图片描述

0563xixi

关注

13
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
10vue学习——利用VScode快速创建html模板

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

扫一扫