Vscode快捷生成Vue3代码片段｜自定义代码块

最新推荐文章于 2025-06-30 11:27:12 发布

今天又有什么bug

最新推荐文章于 2025-06-30 11:27:12 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3 前端开发笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46019681/article/details/127204625

前端开发笔记同时被 2 个专栏收录

8 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍如何在VSCode中配置Vue3代码片段，通过简单的步骤实现快速生成Vue3的基础项目结构，提高前端开发效率。

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

目的是输入vue3回车，显示如下代码：

如何设置：

点击vscode左下角的齿轮

选择配置用户代码片段，

新建，命名为vue3（注：命名为XX之后输入XX回车就可以生成XX对应的模版），

创建内容如下：

{
	"Print to console": {
		"scope": "",
		"prefix": "vue3",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"<head>",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<title>Document</title>",
			"\t<script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>",
			"</head>",
			"<body>",
			"\t<div id=\"app\"></div>",
			"\t<script>",
			"\tconst app = Vue.createApp({",
			"\t\tsetup() {",
			"\t\t\treturn {",
			"",
			"\t\t\t}",
			"\t\t},",
			"\t}).mount(\"#app\")",
			" </script>",
			"</body>",
			"<html>"
		],
		"description": "Vue3的基本模版"
	}
}

根据自己的需要，可以对以上代码进行修改～

🌻