vscode 快捷键新建vue模板

本文介绍如何在VisualStudioCode中配置用户代码片段,实现使用快捷键'vue'快速生成Vue组件模板,涵盖template、script和style部分,大幅提升前端开发效率。

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

微信图片_20200226122320.jpg

vue提高开发效率之 快速生成模板文件的方式
开发工具:Visual Studio Code

1、找到用户代码片段设置

微信截图_20200226115758.png

2、找到vue配置文件

微信截图_20200226115905.png

3、替换模板格式代码

{
	"Print to console": {
		"prefix": "vue",  
		"body": [
		  "<!-- $1 -->",
		  "<template>",
		  "<div></div>",
		  "</template>",
		  "",
		  "<script>",
		  "export default {",
			"    name:\"\",",
			"    data() {",
			"        return {",
					"",
			"        }",
			"    },",
			"    //生命周期 - 创建完成(访问当前this实例)",
			"    created() {",
			"",
			"    },",
			"    //生命周期 - 挂载完成(访问DOM元素)",
			"    mounted() {",
			"",
			"    }",
		  "}",
		  "</script>",
		  "<style scoped>",
		  "/* @import url(); 引入css类 */",
		  "$4",
		  "</style>"
		],
		"description": "Log output to console"
	  }

}

注意:prefix 这个字段是快捷键匹配(可以自己定义)

4、配置完成

新建文件输入 vue
微信图片_20200226122156.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值