vscode中快速生成vue模板

最新推荐文章于 2025-10-12 02:02:27 发布

原创最新推荐文章于 2025-10-12 02:02:27 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #vue.js #ide #编辑器 #前端

Vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在VSCode中设置用户代码片段，特别是针对Vue项目的模板。通过下载Vetur插件和编辑vue.json文件，可以快速生成包含模板结构的Vue组件，包括template、script和style部分，提高开发效率。

首先：打开vs code 界面左下角如下图所示

选中打开齿轮选择用户代码片段

第一次搜索vue.json文件可能显示的是vue，或者没有，你可以先在vs code中下载Vetur插件先

打开vue.json后，默认是如下图

要快速生成vue模板，需要在其中编辑加入下列代码：

"Vue": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div>\n",
            "    </div>",
            "</template>",
            "<script>",
            "export default {",
            "   data() {",
            "      return {",
            "      }",
            "   },",
            "   created(){",
            "   },",
            "   computed:{",
            "   },",
            "   methods:{",
            "   },",
            "}",
            "</script>",
            "<style>\n",
            "</style>",
            "$2"
        ]
    }

　　保存即可