vscode快捷生成vue模板

步骤

①文件 – 首选项 --用户代码片段
在这里插入图片描述

②新建全局json 文件命名为 vue.json
在这里插入图片描述
③填充以下代码

{
	"HTML Snippets": {
		"prefix": "vue", // 触发的关键字 输入vue按下tab键
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"\t<head>",
			"\t\t<meta charset=\"UTF-8\" />",
			"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\" />",
			"\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"\t\t<title>$1</title>",
			"\t</head>",
			"\t<body>",
			"\t\t$0",
			"\t\t<!-- 被 vm 实例所控制的区域 -->",
			"\t\t<div id=\"app\"></div>",
			"\t\t\t$0",
			"\t\t<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>",
			"\t\t<script src=\"https://unpkg.com/vue-router/dist/vue-router.js\"></script>",
			"\t\t<script>",
			"\t\t\t// 创建vm实例对象",
			"\t\t\tconst vm = new({",
			"\t\t\t\t//指定控制区域",
			"\t\t\t\tel: '#app',",
			"\t\t\t\tdata: {",
			"\t\t\t\t\t$0",
			"\t\t\t\t},",
			"\t\t\t\tmethods: {",
			"\t\t\t\t\t$0",
			"\t\t\t\t},",
			"\t\t\t})",
			"\t\t</script>",
			"\t</body>",
			"</html>"
		],
		"description": "Vue Template"
	}
}

④新建一个html文件，输入vue，按下enter键
在这里插入图片描述

原文链接：https://blog.csdn.net/qq_44361450/article/details/110306571