如何使用Vscode定义Vue的template

前端More

已于 2022-04-08 15:58:09 修改

阅读量2.1k

点赞数 6

分类专栏：前端学习过程遇见的小问题文章标签： vue.js 前端

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

本文链接：https://blog.csdn.net/Better_Xing/article/details/107697115

版权

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

2 篇文章 0 订阅

订阅专栏

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