在vscode中快速生成vue代码模板

最新推荐文章于 2024-07-08 16:44:01 发布

屈誉

最新推荐文章于 2024-07-08 16:44:01 发布

阅读量3.2k

点赞数

分类专栏： vscode 前端文章标签： vue vscode

本文链接：https://blog.csdn.net/N1keo/article/details/89743712

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

vscode

2 篇文章 1 订阅

订阅专栏

第一步，打开vscode，按图片顺序找到用户代码片段，进入。
在这里插入图片描述
第二步，输入html ，或者vue 回车进入。如果没设置过，就是一些注释的东西，可以删掉，复制进去以下代码。
prefix后面的是快捷指令，可以修改。

{"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>"
	]
	}
}

在这里插入图片描述
然后在html或vue界面输入ve 然后回车可以直接看到代码模板。

屈誉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在vscode中快速生成vue代码模板

第一步，打开vscode，按图片顺序找到用户代码片段，进入。第二步，输入html ，或者vue 回车进入。如果没设置过，就是一些注释的东西，可以删掉，复制进去以下代码。prefix后面的是快捷指令，可以修改。{"vue代码": {"prefix": "ve","body": ["<!DOCTYPE html>","","<html lang='en'&gt...
复制链接

扫一扫

专栏目录