vscode中快速生成vue模板

最新推荐文章于 2025-11-05 11:01:54 发布

原创最新推荐文章于 2025-11-05 11:01:54 发布 · 559 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue入门专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在VSCode中设置Vue代码片段，通过快捷输入实现模板快速生成，提高前端开发效率。涵盖文件-》首选项-》用户代码片段的配置步骤。

菜单栏：

文件-》首选项-》用户代码片段-》vue
在这里插入图片描述

"Print to console": {
	//当输入vue点击tab键即可生成模板内容
		"prefix": "vue",
		"body": [
			 "<template>",
            "    <div>\n",
            "    </div>",
            "</template>\n",
            "<script>",
            "export default {",
            "    data() {",
            "        return {\n",
            "        };",
            "    },",
            "    created() {\n",
            "    },",
            "    mounted() {\n",
            "    },",
            "    methods: {\n",
            "    }",
            "};",
            "</script>\n",
            "<style>\n",
            "</style>\n",
	 	],
	//模板描述
		"description": "Log output to console"
	 }

代码片段说明：

// Example:
	// "Print to console": {
	//当输入log点击tab键即可生成模板内容
	// 	"prefix": "log",//可修改
	// 	"body": [
	// 		模板主体
	// 	],
	//模板描述
	// 	"description": "Log output to console"
	// }

json格式：
json使用双引号包裹字符串
注：
同样方式可以用来生成html模板
文件-》首选项-》用户代码片段-》html
按照上面的方式修改就可以了