VSCode配置代码模板

最新推荐文章于 2025-06-23 10:20:19 发布

原创最新推荐文章于 2025-06-23 10:20:19 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #javascript #前端 #vscode代码块生成 #snippet

Vue进阶专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用Vue.js创建一个简单的应用程序，包括配置基本HTML结构、Vue实例化及数据绑定，以及最后的挂载到DOM。通过一步步操作，新手也能快速上手Vue开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 开发需要配置的代码

"create vue app": {
  "prefix": "vueapp",
  "body": [
    "<html lang=\"en\">",
    "<head>",
    "  <meta charset=\"UTF-8\">",
    "  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    "  <title>Document</title>",
    "</head>",
    "<body>",
    "",
    "  <div id=\"app\">",
    "  </div>",
    "  ",
    "  <script src=\"../lib/vue.js\"></script>",
    "  <script>",
    "    // 1. create an app",
    "    const app = Vue.createApp({",
    "      // data: option api",
    "      data: function() {",
    "        return {",
    "          message: \"Hello Vue\"",
    "        }",
    "      }",
    "    })",
    "",
    "    // 2. mount app",
    "    app.mount(\"#app\")",
    "  </script>",
    "</body>",
    "</html>"
  ],
  "description": "create vue app"
}

2. 使用片段生成器生成代码snippet

https://snippet-generator.app/

2.1 输入描述/关键字/代码块

在这里插入图片描述

2.2. 赋值生成的json

"create vue app": {
  "prefix": "vueapp",
  "body": [
    "<html lang=\"en\">",
    "<head>",
    "  <meta charset=\"UTF-8\">",
    "  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    "  <title>Document</title>",
    "</head>",
    "<body>",
    "",
    "  <div id=\"app\">",
    "  </div>",
    "  ",
    "  <script src=\"../lib/vue.js\"></script>",
    "  <script>",
    "    // 1. create an app",
    "    const app = Vue.createApp({",
    "      // data: option api",
    "      data: function() {",
    "        return {",
    "          message: \"Hello Vue\"",
    "        }",
    "      }",
    "    })",
    "",
    "    // 2. mount app",
    "    app.mount(\"#app\")",
    "  </script>",
    "</body>",
    "</html>"
  ],
  "description": "create vue app"
}