VS-Code中快速生成vue代码片段

1、打开用户代码片段

方法一：Ctrl+Shift+P打开命令输入 snippets; 在搜索框输入vue选择‘vue.json’（我就没搜到）。
方法二：文件 → 首选项 → 用户代码片段 → 在搜索框输入vue选择‘vue.json’。

我的是页面是这样子的：

在这里插入图片描述

2、将下面代码复制放入上方的刚打开的页面中

这个代码生成的骨架，还比较丰富的，可以根据个人的需求自行修改

{"vue代码": {
"prefix": "ve",
"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=\"../node_modules/vue/dist/vue.min.js\"></script>",
	"</head>",
	"",
	"<body>",
    "\t<div class=\"container\">",
 
	"\t</div>",
 
 
    "\t<script>",
	" \t\tvar vue = new Vue({",
		"\t\t\tel : '.container',",     
		"\t\t\tdata : {  }," ,         
		"\t\t\tmethods : { }    "  ,   
        "\t\t});",
		"\t</script>",
		"</body>",
		"",
		"</html>"
	]
	}
}

我的是这样的

在这里插入图片描述

最后的效果是这样的

在这里插入图片描述

第一次写博客，好多还不太会，哈哈

参考文章一：VScode中Vue快速生成代码片段-码知秋
 参考文章二：VSCode自定义快捷键生成Vue实例模板——附模板代码-Microbabyshine

原文链接：https://blog.csdn.net/weixin_44549096/article/details/113705864