vscode hbuilder 自定义设置html代码块vue代码块

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

原创最新推荐文章于 2025-06-30 11:27:12 发布 · 3.0k 阅读

0 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种快速创建Vue项目的技巧，通过设置代码块，只需输入'vh'即可自动生成完整的HTML模板，包括Vue实例和基本的HTML结构，极大提高了开发效率。

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

相信大家在学习vue的时候新建一个html页面很痛苦需要手打模板多麻烦呀咱们直接设置代码块复制直接用

{
	"vue html": {
        "prefix": "vh",
        "body": [
			"<!DOCTYPE html>",
			"<html>",
			"\t<head>",
			"\t<meta charset=\"utf-8\">",
			"\t<title>vue html demo</title>",
			"\t<script src=\"./lib/vue-2.4.0.js\"></script>",
			"\t</head>",
			"\t<body>",
			"\t\t<div id=\"app\">",
			"\t\t</div>",
			"\t\t<script>",
			"\t\t\tnew Vue({",
			"\t\t\t\tel: '#app',",
			"\t\t\t\tdata: {\n",
			"\t\t\t\t},",
			"\t\t\t\tmethods:{\n",
			"\t\t\t\t}",
			"\t\t\t})",
			"\t\t</script>",
			"\t</body>",
			"</html>"
        ],
        "description": "The full sample code - hello world."
    }
}

代码图