当前位置: article > 正文

在Visual Studio Code软件中利用快捷键快速搭建vue实例的模板（vue一课一得）_vs+code+怎么快速写出vue代码结构

作者：2023面试高手 | 2024-03-14 00:36:05

踩

vs+code+怎么快速写出vue代码结构

前言：今天在某站看关于vue教学视频的时候，我看到了老师在html页面中使用快捷键vh即可快速生成基本的vue实力框架，大致效果如下图：

想完成这种快速搭建vue框架的方法我们需要先设置再使用

如何设置？

1.1点击vs code页面左下角小齿轮的设置，随后选择“用户代码片段”选项，具体如下图：

1.2在上方的输入框内输入javascript后回车（第一次输入可能没有联想）

回车过后你将会看到系统给出的已经注释了的模板如下图：

一大堆英文字母看不懂但知道example 是举例的意思，我们把它的举行解开注释，修改成我们想要的框架，

1.3修改模板代码

简单的解释一下这几句代码分别有什么含义：

第7行的"Print to console"是提示信息

第8行的"prefix": "log"是设置生成框架的快捷键，这里我建议设置成vh

第9行“body”是一个数组，是框架呈现出来的内容，一对双引号装一行代码

第13行是框架的描述信息，没啥用，可以删掉

修改完后的代码如下，可自行复制：


{
	// Place your vue.js开发教程 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"Print to Vue&html base code": {
		"prefix": "vh",//此处将快捷键设置为vh，当输入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>",
			"    <!-- 导入 vue 文件 -->",
			"    <script src=\"\"></script>",
			"</head>",
			"",
			"<body>",
			"    <!-- 被 vm 实例所控制的区域,创建了id为app的div ，创建根节点-->"
			"    <div id=\"app\">",
			"",
			"    </div>",
			"",
			"    <script>",
			"        // 创建 vm 实例对象",
			"        const vm = new Vue({",
			"            el: '#app', // 指定控制的区域",
			"            data: {//创建data对象存放数据"
			"",
			"            },",
			"            methods: {//创建methods对象存放代码"
			"",
			"            }",
			"        });",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		
	}
}

如何使用？

很简单，在html页面输入刚刚设置的vh就会有联想（可根据自己喜好更改），再回车模板就会出来

拓展：

为了提升打代码的效率这边建议大家下载一个一千多万下载量的插件JavaScript (ES6) code snippets

JavaScript (ES6) code snippets插件在VS Code中的作用是提供ES6语法的代码片段，以帮助开发人员更快速、更高效地编写JavaScript代码。

通过这个插件，开发人员可以节省时间，因为他们可以在一个地方获取所有的代码片段，而不需要重复地输入相同的代码。此外，这个插件还支持智能提示和快速输入，这可以帮助开发人员更快地编写代码。

具体来说，JavaScript (ES6) code snippets插件可以提供以下功能：

ES6语法智能提示：当你在编写JavaScript代码时，插件会自动提示你使用ES6语法的代码片段，从而加快开发速度。
快速输入：通过快捷键或自定义设置，你可以快速插入常用的代码片段，从而提高开发效率。
支持多种文件类型：这个插件不仅仅支持.js文件，还支持.ts、.jsx、.tsx、.html和.vue等文件类型，这使得它更加通用和方便。
省去配置时间：这个插件已经预配置好了许多常用的代码片段，你不需要手动配置。这可以省去你大量的时间和精力。

举个例子，当我们想打一个箭头函数时输入anfn就会有联想，再回车即可出箭头函数的框架，省去了打代码的时间

还有其他联想功能在此就不在一一列举，插件细节中有都有介绍

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/231480