一键快速生成 Vue 的 HTML页面结构代码
VS Code除了使用 !+Tab 在html文件中快速创建html结构代码之外，还可以自己定义代码段，这里分享如下在 Vue 环境下快速通过成 html 结构。
1. 创建配置文件
- 第一步 文件 ==> 首选项 ==>用户代码片段
- 第二步 搜索框中输入html （如果需要在别的类型的文件中可以输入对应的名字，如：vue.json)， 然后回车，进入配置窗口。
- 第三步： 输入以下代码（可根据自己的需求修改） { "Html5-Vue": { "prefix": "vh", "body": [ "<!DOCTYPE html>", "<html lang="en">", "", "<head>", " <meta charset="UTF-8">", " <meta name="viewport" content="width=device-width, initial-scale=1.0">", " <title>Document</title>", "</head>", "", "<body>", " <div id="app"> ", " <template>", " <hl>{ {title}}$0</hl>", " </template>", " </div>", "", " <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>", "", " <script>", " var vm = new Vue({", " el: #app, //绑定到DOM上", " data() {", " return {", " a: 3,", " }", " },", " //监听data中的数据变化", " watch: {", "", " },", " //方法集合", " methods: { ", " },", " //计算属性-以函数形式声明，但不接受参数,它的this指向Vue实例", " computed: {", " num() {", " return this.a * 2 + 2", " },", " },", " //生命周期 - 创建完成（可以访问当前this实例）", " created() {", "", " },", " //实例初始化之后，数据观测和事件绑定之前", " beforeCreate(){}, ", " //实例初始化完成，挂载尚未开始时", " created() {", " console.log(created);", " },", " //生命周期 - 挂载之前，render 函数首次被调用时", " beforeMount(){}, ", " //生命周期 - 挂载完成（可以访问DOM元素）", " mounted: {", "", " },", " //生命周期 - 数据更新时，在虚拟DOM状态变化之前", " beforeUpdate(){}, ", " //生命周期 - 虚拟DOM被重新渲染之后", " updated(){}, ", " //生命周期 - 实例销毁之前，此时实例依然可用", " beforeDestroy(){}, ", " //生命周期 - 销毁完成，此时Vue 实例及其子实例将完全解绑", " destroyed(){}, ", " //如果页面有keep-alive缓存功能，这个函数会触发", " activated(){}, ", " })", " </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键，就会依次准备定位到了该位置。神速……
、 ：是转义字符。 是横向跳i到下一制表符位置（这里用于代码缩进控制）， 是回车换行。
4. 注意
配置文件中，以下几点请注意：
- 预定义格式中的所有的英文状态下的 每个 单侧双引号，都要在它的前面加上转义符号 ()；
- body中，每一个内容的头尾都要用英文状态下的双引号（"…"）括起来，句尾最后必须跟上英文逗号（,）。
如果不这样，就会报错！
