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

不念不忘少年蓝@ 2022-12-26 08:21 283阅读 0赞

### 目录 ###

*  1. 创建配置文件
 *  2. 使用
 *  3. 配置说明
 *  4. 注意

VS Code除了使用 !+Tab 在html文件中快速创建html结构代码之外，还可以自己定义代码段，这里分享如下在 Vue 环境下快速通过成 html 结构。

# 1. 创建配置文件 #

1.  **第一步**
    
    文件 ==> 首选项 ==>用户代码片段  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]  
      
    
2.  **第二步**
    
    搜索框中输入html （如果需要在别的类型的文件中可以输入对应的名字，如：vue.json)，![在这里插入图片描述][20201203213734725.png]
    
    然后回车，进入配置窗口。  
      
    
3.  **第三步**： 输入以下代码（可根据自己的需求修改）
    
        {
        "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 模板"
            }
        }
    
    如下图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]
4.  **第四步** ：ctrl + s 保存文件

# 2. 使用 #

在新建的 html 文件中输入自己先前定义好的快捷指令名称并按下 Tab（或回车键，本例中的名称是 vh ）  
![在这里插入图片描述][2020120321553538.png]  
自动生成的效果，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 2]

# 3. 配置说明 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 3]

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

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

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

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

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

# 4. 注意 #

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

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

如果不这样，就会报错！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]: /images/20221120/f116b25d0232472ca5391df6042cecd7.png
[20201203213734725.png]: https://img-blog.csdnimg.cn/20201203213734725.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201203214417992.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[2020120321553538.png]: https://img-blog.csdnimg.cn/2020120321553538.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201203215652868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201203223608206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[20201203220358312.png]: https://img-blog.csdnimg.cn/20201203220358312.png