如何在vscode中设置vue模板

最新推荐文章于 2024-08-30 01:40:33 发布

很焦虑的咸鱼

最新推荐文章于 2024-08-30 01:40:33 发布

阅读量357

点赞数

分类专栏： vue 文章标签： vscode vue.js javascript

本文链接：https://blog.csdn.net/m1341544516/article/details/122462458

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在VSCode中快捷创建Vue模板的步骤：进入文件->首选项->用户片段，新建全局代码片段文件，命名后替换内容为指定代码，通过缩写触发代码段。

摘要由CSDN通过智能技术生成

选择文件->首选项->用户片段
选择新建全局代码片段文件
输入你给这个模板文件起的名字并按回车
将文件内容全部删除并换成以下代码：

{
  "h5 sample": {
    // 设置整个代码段的缩写为vue
    "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\">",
      // 外部引入vue.js的路径需要修改为自己的路径
      "\t<script src=\"../js/vue.js\"></script>",
      "\t<title>$0</title>",

      "</head>",
      "<body>",
      "\t<div id=\"app\">",
      "\t\t{{message}}",
      "\t</div>",
      "\t<script>",
      "\t\tconst app = new Vue({",
      "\t\t\tel:\"#app\",",
      "\t\t\tdata:{",
      "\t\t\t\tmessage:\"你好啊\"",
      "\t\t\t}",
      "\t\t})",
      "\t</script>",
      "</body>",
      "</html>"
    ],
    "description": "The full sample code - html5."
  }
}