1. 创建配置文件

第一步

文件 ==> 首选项 ==>用户代码片段
第二步

搜索框中输入html （如果需要在别的类型的文件中可以输入对应的名字，如：vue.json)，

然后回车，进入配置窗口。

第三步：输入以下代码（可根据自己的需求修改）

{
"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<title>Document</title>","</head>","","<body>","\t<div id=\"app\"> ","\t\t<template>","\t\t\t<hl>{{title}}$0</hl>","\t\t</template>","\t</div>","","\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>","","\t<script>","\t\tvar vm = new Vue({","\t\t\tel: '#app', //绑定到DOM上","\t\t\tdata() {","\t\t\t\treturn {","\t\t\t\t\ta: 3,","\t\t\t\t}","\t\t\t},","\t\t\t//监听data中的数据变化","\t\t\twatch: {","","\t\t\t},","\t\t\t//方法集合","\t\t\tmethods: {\n","\t\t\t},","\t\t\t//计算属性-以函数形式声明，但不接受参数,它的this指向Vue实例","\t\t\tcomputed: {","\t\t\t\tnum() {","\t\t\t\t\treturn this.a * 2 + 2","\t\t\t\t},","\t\t\t},","\t\t\t//生命周期 - 创建完成（可以访问当前this实例）","\t\t\tcreated() {","","\t\t\t},","\t\t\t//实例初始化之后，数据观测和事件绑定之前","\t\t\tbeforeCreate(){},\n","\t\t\t//实例初始化完成，挂载尚未开始时","\t\t\tcreated() {","\t\t\t\tconsole.log('created');","\t\t\t},","\t\t\t//生命周期 - 挂载之前，render 函数首次被调用时","\t\t\tbeforeMount(){},\n","\t\t\t//生命周期 - 挂载完成（可以访问DOM元素）","\t\t\tmounted: {","","\t\t\t},","\t\t\t//生命周期 - 数据更新时，在虚拟DOM状态变化之前","\t\t\tbeforeUpdate(){},\n","\t\t\t//生命周期 - 虚拟DOM被重新渲染之后","\t\t\tupdated(){},\n","\t\t\t//生命周期 - 实例销毁之前，此时实例依然可用","\t\t\tbeforeDestroy(){},\n","\t\t\t//生命周期 - 销毁完成，此时Vue 实例及其子实例将完全解绑","\t\t\tdestroyed(){},\n","\t\t\t//如果页面有keep-alive缓存功能，这个函数会触发","\t\t\tactivated(){},\n","\t\t})","\t</script>","</body>","",   "</html>"],"description": "快速创建在 html5 编写的 vue 模板"}
}

如下图所示：

第四步 ：ctrl + s 保存文件

2. 使用

在新建的 html 文件中输入自己先前定义好的快捷指令名称并按下 Tab（或回车键，本例中的名称是 vh ）

自动生成的效果，如下图：

3. 配置说明

“Print to console”：这个可以自定义。就是在键入代码时，代码提示窗口中出现在右侧的指令名称，如下图所示，本例中是“Html5-Vue”，你可以任意名称命名。

“prefix”：快捷指令标签。定义好名称后，后面在新建文件时键入它并按下Tab键或回车键后，预定义的结构就能瞬间生成。

“body”：你想生成的结构内容；

$0、$1、$2、$3……，结构生成后的光标定位。
当快捷生成结构后，光标所在的位置，当然肯定是在1位置。即我们定义结构后有些地方是要修改或者增加内容，有了上面的定义，直接TAB键，就会依次准备定位到了该位置。神速……

\t 、\n：是转义字符。\t 是横向跳i到下一制表符位置（这里用于代码缩进控制），\n 是回车换行。

4. 注意

配置文件中，以下几点请注意：

预定义格式中的所有的英文状态下的每个单侧双引号，都要在它的前面加上转义符号 (\)；
body中，每一个内容的头尾都要用英文状态下的双引号（"…"）括起来，句尾最后必须跟上英文逗号（,）。

如果不这样，就会报错！

一键快速生成 Vue 的 HTML页面结构代码相关推荐

开发日记-20190328 关键词利用eolinker一键快速生成API接口文档
今天感觉效率真的很低= =各个层面的,apk发布到现场发现出现了问题,所以一个下午都在忙着解决现场出现的问题,领导一直打电话询问进度,午觉也没有睡所以今天预计的很多计划都处于停滞状态,像昨天规划的今天 ...
AE一键快速生成MG爆炸图形动画插件：Burst Box for Mac
Burst Box for Mac是一款安装在ae中使用的一键快速生成MG爆炸图形动画插件,使用 BurstBox,可以在一秒钟内制作精美的爆裂动画!每个动画都很容易定制(颜色和样式). BurstB ...
GreenDao 工具类 --- 使用 Json 快速生成 Bean、表及其结构，炒鸡快！
作者:林冠宏 / 指尖下的幽灵掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...
基于UI组件的Vue可视化布局、快速生成.vue代码
一.项目简介基于UI组件的Vue可视化布局.快速生成.vue代码二.实现功能通用(文本.链接.换行.div.图片) 支持elementUI 支持iViewUI(button .icon.radi ...
vscode 添加用户代码片段（快速生成 vue 模板）
文件–>首选项–>用户代码片段–>点击新建代码片段–取名 vue.json 确定 {"生成 vue 模板": {"prefix": " ...
教你一键快速生成后台代码，这样和测试小姐姐聊天的时间又多了
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
Vue + Spring Boot 项目实战（三）：使用IntelliJ IDEA快速生成 Vue.js 项目
文章目录一.使用idea Vue插件生成项目结构 1.1. Create New Project 1.2. 设置项目地址 1.3. 确认项目名称 1.4. 项目描述 1.5. 作者信息 1.6. 编 ...
快速生成sparksql创建carbondata表结构（同步mysql或sqlserver数据）脚本
前言当实时同步mysql或sqlserver很多表数据到carbondata时,经常要手动调整脚本涉及到的每个表的字段.类型及对应建表语句,耗费大量的机械比对粘贴复制工作时间.精力,下面介绍的脚本能 ...
怎样在线完成gif动画制作？教你一键快速生成gif动图
在工作中有不少小伙伴经常会用到gif动态图片来做展示或是宣传,但是很多小伙伴不会使用那些专业的做图软件来制作gif动图.那么,如果遇到需要自己制作动态gif图片的时候应该怎么办呢?这时候,就可以使用g ...

一键快速生成 Vue 的 HTML页面结构代码

目录

1. 创建配置文件

2. 使用

3. 配置说明

4. 注意

一键快速生成 Vue 的 HTML页面结构代码相关推荐

最新文章

热门文章