一键快速生成 Vue 的 HTML页面结构代码
目錄
- 1. 創建配置文件
- 2. 使用
- 3. 配置說明
- 4. 注意
VS Code除了使用 !+Tab 在html文件中快速創建html結構代碼之外，還可以自己定義代碼段，這里分享如下在 Vue 環境下快速通過成 html 結構。
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. 注意
配置文件中，以下幾點請注意：
如果不這樣，就會報錯！
總結
以上是生活随笔為你收集整理的一键快速生成 Vue 的 HTML页面结构代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： docker-compose命令介绍和使
- 下一篇： 超详细前端开发案例：品优购商场项目(三)