VsCode自定义HTML模板（附模板）ElementUI模板

最新推荐文章于 2025-11-03 13:29:56 发布

原创最新推荐文章于 2025-11-03 13:29:56 发布 · 3.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #java #前端

本文介绍了如何通过创建代码片段快速生成ElementUI项目模板，包括设置步骤和提供的通用模板，帮助开发者节省时间。

下面的模板为本人在学习 ElementUI 的过程中发现这样可以更快的生成一个 ElementUI 模板，可以很快速的提升效率。

该模板是通用的，可以根据自己的需求进行替换即可。

第一步：选择 “文件 -> 首选项 -> 配置用户代码片段” 。

第二步：在出来的页面中选择 “新代码片段”。

第三步：输入该模板的名称，名称随便取。

第四步：按下回车后出现以下界面。

第五步：复制下面的配置，我已经全部配好了，直接复制粘贴即可。

其中的 prefix 为快捷名，也就是生成模板的名字。

{
	"Create ElementUI template": {
   	"prefix": "el",
   	"body": [
   		"<!DOCTYPE html>",
   		"<html lang=\"en\">",
			"",
			"<head>",
			"  <meta charset=\"UTF-8\">",
			"  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"  <title>demo</title>",
			"  <!-- import Element CSS -->",
			"  <link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\">",
			"  <!-- import Vue  -->",
			"  <script src=\"https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js\"></script>",
			"  <!-- import Element JavaScript -->",
			"  <script src=\"https://unpkg.com/element-ui/lib/index.js\"></script>",
			"",
			"  <!-- Local style -->",
			"  <style type=\"text/css\">",
			"    body {",
			"      margin: 0",
			"    }",
			"  </style>",
			"</head>",
			"",
			"<body>",
			"  <div id=\"app\">",
			"    <el-row>",
			"      <el-button type=\"success\">初始化成功</el-button>",
			"    </el-row>",
			"  </div>",
			"</body>",
			"",
			"<script type=\"text/javascript\">",
			"  new Vue({",
			"    el: \"#app\",",
			"    data: function () {",
			"      return {}",
			"    }",
			"  })",
			"</script>",
			"",
			"</html>"
   	],
   	"description": "Create ElementUI template"
	}
}

第六步：保存，新建一个 html 页面，输入我们定义好的快捷名，按下回车即可。