3秒钟教你如何配置vscode中的vue3代码快速生成模版

一只花小妖

已于 2023-07-27 17:57:28 修改

阅读量4.1k

点赞数 9

文章标签： vscode ide 编辑器

于 2023-07-27 17:31:31 首次发布

本文链接：https://blog.youkuaiyun.com/LLL3189860667/article/details/131964958

版权

在VSCode中，可以通过设置用户代码片段来快速生成Vue3模板。步骤包括点击齿轮设置，搜索并编辑vue.json文件，粘贴预设的代码段，包含模板、scriptsetup（使用typescript）和style（使用scss）部分。只需输入vue3并回车，即可自动生成Vue3组件结构。

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

1.首先点击你的vscode左下角的齿轮设置按钮，然后点击配置用户代码片段。

2.输入vue搜索vue.json这个文件，然后点击这个文件

3.接下来只需在原有的注释之下输入粘贴如下代码即可

代码如下：

  "vue3": {
        "prefix": "vue3",
        "body": [
            "<template>",
            "  <div class=\"\">",
            "",
            "",
            "",
            "",
            "  </div>",
            "</template>",
            "<script setup lang=\"ts\">",
			"import {ref,reactive} from \"vue\"",
            "",
            "",
            "",
            "",            
            "</script>",
            "<style lang=\"scss\" scoped>",
            "",
            "",
            "",
            "",
            "</style>",
            ""
        ],
        "description": "快速创建vue3模板"
    }