vscode之快速生成vue模板的配置

最新推荐文章于 2025-05-04 16:02:08 发布

przlovecsdn

最新推荐文章于 2025-05-04 16:02:08 发布

阅读量7.4k

点赞数 1

分类专栏： vscode 文章标签： vue vscode vue模板快速生成vue模板

本文链接：https://blog.youkuaiyun.com/przlovecsdn/article/details/81509106

版权

vscode 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在VSCode中设置Vue代码片段，通过简单的快捷键即可快速生成标准的.vue文件结构，极大提高开发效率。

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

在vscode中点击左下角的设置---用户代码片段---输入：vue.json，将以下代码复制保存，然后新建.vue文件，输入：vue，回车即可。可按需自行添加内容。


{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div>",
            "    $0",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "",
            "  export default {",
            "    name:'',",
            "    props:[''],",
            "    data () {",
            "      return {",
            "",
            "      };",
            "    },",
            "",
            "    components: {},",
            "",
            "    computed: {},",
            "",
            "    beforeMount() {},",
            "",
            "    mounted() {},",
            "",
            "    methods: {},",
            "",
            "    watch: {}",
            "",
            "  }",
            "",
            "</script>",
            "<style lang='' scoped>",
            "",
            "</style>"
        ],
        "description": "Log output to console"
    }
}