首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >vs code工具中设置html5 快速生成vue模板

vs code工具中设置html5 快速生成vue模板

作者头像
清出于兰
发布2021-06-29 11:33:01
发布2021-06-29 11:33:01
2.4K0
举报
文章被收录于专栏:前端学习笔记前端学习笔记

vs code工具中设置html5 快速生成vue模板

1.编辑html.json文件 2.替换需要自动生成的代码 3.在新建的html中输入vh回车即可

1.编辑html.json文件(在用户片段里面找不到html.json)

在用户片段里面找不到html.json,新建全局代码片段文件,文件名为html.json

然后copy代码,也可以自定义自己需要的模板。

输入html,选择html.json文件

2.替换需要自动生成的代码

{

"html5-vue": {

"prefix": "vh", // 对应的是使用这个模板的快捷键

"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=\"./lib/vue_2.5.22.js\"></script>",

"</head>\n",

"<body>",

"\t<div id =\"app\"> </div>\n",

"\t<script>",

"\t //创建Vue实例,得到 ViewModel",

"\t const vm = new Vue({",

"\t\tel: '#app',",

"\t\tdata: {},",

"\t\tmethods: {}",

"\t });",

"\t</script>",

"</body>\n",

"</html>"

],

"description": "HT-H5" // 模板的描述

}

}

3.在新建的html中输入vh回车即可

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-06-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档