如何使用Vscode定义Vue的template

如何使用Vscode定义Vue的template

目标:

我们希望每次新建html文件后，vscode能够根据配置，自动生成我们想要的vue模板。

方法:

打开Vscode编辑器，依次选择“左下角设置 -> 用户代码片段 -> 新建全局代码片段文件”>。

输入你想要设置的文件名

复制以下内容到这个文件中，保存后关闭这个文件。

{
  "h5 sample": {
    "prefix": "vue",
    "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>$0</title>",
      "\t<script src=\"https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js\"></script>",
      "</head>",
      "<body>",
      "\t<div id=\"app\">",
      "\t</div>",
      "\t<script>",
      "\t\tconst vm = new Vue({",
      "\t\t\tel:\"#app\",",
      "\t\t\tdata:{",
      "\t\t\t},",
      "\t\t\tmethods:{",
      "\t\t\t},",
      "\t\t})",
      "\t</script>",
      "</body>",
      "</html>"
    ],
    "description": "The full sample code - html5."
  }
}

在新建的html文件中,输入vue按回车,vue的template就出现了