如何使用vscode快速新建vue模版

最新推荐文章于 2025-11-12 16:00:04 发布

原创最新推荐文章于 2025-11-12 16:00:04 发布 · 3.2w 阅读

31 ·

CC 4.0 BY-SA版权

配置（环境）专栏收录该内容

58 篇文章

订阅专栏

本文介绍如何在VSCode中配置Vue代码片段以提高开发效率。通过简单的步骤，用户可以设置自定义的代码模板，例如创建包含样式、模板和脚本的基本Vue组件结构。

1、文件 ==> 首选项 ==> 用户代码片段 ==> 输入 vue 然后回车

2、添加配置，让vscode允许自定义的代码片段提示出来

"Print to console": {
        "prefix": "vue",
        "body": [
			"<style>",
			"/* pageFullScreen在index.css */",
			"#xxxFullScreen {",
				"background-color: #eee;",
			"} \n",
            "</style>",
            "<template>",
            "    <div class=\"pageFullScreen\" id=\"xxxFullScreen\">\n",
            "    </div>",
            "</template>",
            "<script>",
            "export default {",
            "   data() {",
            "      return {",
			"      }",
			"   },",
			"   activated() {",
			"   }",
			"}",
			"</script>",
            "$2"
        ],
        "description": "Log output to console"
    }

测试方法：新建vue后缀文件，输入vue，按下tab键，OK