VSCode 使用快捷键vh一键生成.vue模版

最新推荐文章于 2025-04-16 00:25:30 发布

yoghurt&girl

最新推荐文章于 2025-04-16 00:25:30 发布

阅读量5.7k

点赞数 1

分类专栏： JavaScript 文章标签： vscode vue.js 前端

本文链接：https://blog.youkuaiyun.com/ywforever/article/details/127028771

版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在VSCode中通过快捷键vh快速生成Vue模板。通过用户代码配置，创建vue.json文件并添加特定代码，实现一键创建Vue组件的功能。详细步骤包括两种配置方法，并鼓励读者尝试学习这一实用技巧。

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

我在学习vue的时候发现老师只需要敲vh就可以快速的生成vue模板，当时就被安利了，我想大家知道输入！可以快速生成html模板，所以为了将这个学到手，我就在在网上百度了，最后终于被我找到了哈哈哈！

那下面就跟我一起去设置看看吧！

一、首先打开vscode界面，然后选择用户代码配置，有两种方式可以打开：

第一种：

使用快捷键Ctrl+shif+P，完整的名称是Configure User Snippets,可以使用关键词，就比如我输得是users。

然后选择它之后选择新建，命名为vue.json就行，当然也可以自定义，但后缀名要记住是json哟

第二种：

文件——首选项——配置用户代码，当然我们也可以通过左下角下面的设置按钮进入

二、接下来将下面这段代码复制到我们新建的json文件中，注意放在{}内

"Print to Vue&html base code": {
		"prefix": "vh",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"<head>",
			"  <meta charset=\"UTF-8\">",
			"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"  <title>Document</title>",
			"  <script src=\"https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js\"></script>",
			"</head>",
			"<body>",
			"  <div id=\"root\">",
			"  </div>",
			"  <script>",
			" Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示",
			"     const vm = new Vue({",
			"      el: '#root',",
			"       data() {",
			" return {",
			"}",
			"      },",
			"     methods: {",
			"      }",
			"     });",
			"  </script>",
			"</body>",
			"</html>",
			"",
		],
		"description": "Vue&html base code"
	}