使用vscode，新建vue模板

最新推荐文章于 2025-06-30 11:27:12 发布

转载最新推荐文章于 2025-06-30 11:27:12 发布 · 838 阅读

Visual Studio Code工具专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何在VSCode中配置Vue代码片段模板，通过四步实现快速创建Vue文件结构，提升开发效率。

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

第一步: 新建模板并保存

文件 --> 首选项 --> 用户代码片段 --> 输入vue，选择vue.json -->复制第三步中的模板内容中内容保存

第二步: 添加配置，让vscode允许自定义的代码片段提示出来

文件 --> 首选项 --> 设置 ---> 添加这2项

// Specifies the location of snippets in the suggestion widget
"editor.snippetSuggestions": "top",
// Controls whether format on paste is on or off
"editor.formatOnPaste": true

第三步: 复制以下代码，保存重启vscode

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=\"page\">\n",
            "  </div>",
            "</template>\n",
            "<script type=\"text/ecmascript-6\">",
            "export default {",
            "  data() {",
            "    return {\n",
            "    }",
            "  },",
            "  components: {\n",
            "  }",
            "}",
            "</script>\n",
            "<style scoped lang=\"stylus\">",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}