VsCode自定义HTML模板（附模板）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 页面，输入我们定义好的快捷名，按下回车即可。

VsCode自定义HTML模板（附模板）ElementUI模板相关推荐

VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
vscode自定义HTML、vue等模板内容（一个、多个）- 教程篇
文章目录 vscode自定义HTML模板内容(一个.多个)- 教程篇操作如下: 注意事项:`参考上图所示`: 如何调用? `如下图示` 附:参考文章 vscode自定义HTML模板内容(一个.多个) ...
element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
indesign java_InDesign必杀技，分分钟秒出方案排版（附ID排版模板）
原标题:InDesign必杀技,分分钟秒出方案排版(附ID排版模板) 文末附高级ID作品集模板28套 InDesign一个用于专业排版的设计软件它提供自定义杂志.广告设计.目录.零售商设计工作室和报纸 ...
indesign用于产品排班_InDesign必杀技，分分钟秒出方案排版（附ID排版模板）
原标题:InDesign必杀技,分分钟秒出方案排版(附ID排版模板) InDesign 一个用于专业排版的设计软件它提供自定义杂志.广告设计.目录. 零售商设计工作室和报纸出版方案虽然出道较晚, ...
matlab车牌识别课程设计,matlab车牌识别课程设计报告模板(附源代码).doc
您所在位置:网站首页 > 海量文档 &nbsp>&nbsp计算机&nbsp>&nbspmatlab matlab车牌识别课程设计报告模板(附源代码). ...
如何在PowerPoint中将自定义模板设置为默认模板
Microsoft PowerPoint allows users to set a custom template as the default theme when creating a new ...
【算法模板】DFS秒杀模板—附练习题（阳光号启航）
[算法模板]DFS秒杀模板-附练习题
dedecms 自定义表单html,dedecms自定义表单和自定义表单如何用自己模板教程
dedecms自定义表单和自定义表单如何用自己模板视频教程,无声,但有具体的操作和演示的模板,以及详细的说明. 在线预约一个表单,后台可以直接实现自定义表单功能注意看有个表单的id 其他的不用管, ...

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

VsCode自定义HTML模板（附模板）ElementUI模板相关推荐

最新文章

热门文章