如何使用Vscode定义Vue的template

原创已于 2022-04-08 15:58:09 修改 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2020-07-31 15:40:01 首次发布

前端学习过程遇见的小问题专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在VSCode中配置全局代码片段，以便在新建HTML文件时自动生成完整的Vue模板，提高前端开发效率。

如何使用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."
  }
}