vscode用快捷键一键生成vue模板

news2024/11/24 8:37:41

项目中有些代码模块是固定的,如下面的代码所示,为了不重复写这些相同的代码,我们可以使用快键键一键生成模板。
在这里插入图片描述

流程:
中文:首选项-> 用户代码片段 -> 输入框中输入vue,找到vue.json文件(没有vue.json,选vue也可)-> 定义所需的代码段
英文:Preferences->Configure Snippets-> 输入框中输入vue,找到vue.json文件(没有vue.json,选vue也可)-> 定义所需的代码段
在这里插入图片描述
在这里插入图片描述
定义代码段:
定义了两段代码模版,vue3,vue32
其中$1,$2,$3是鼠标焦点位置,点击tab可以切换到$2,$3的位置。

{
	"vue3 template": {
		"prefix": "vue3", //键入该值,按tab快捷产生
		"body": [
			"<script setup lang=\"ts\">",
			"$3",
			"</script>",
			"",
			"<template>",
			"  $1",
			"</template>",
			"",
			"<style scoped lang=\"scss\">",
			"$2",
			"</style>",
		],
		"description": "Log output to vue3 template"
	},

	"vue3 template2": {
		"prefix": "vue32", //键入该值,按tab快捷产生
		"body": [
			"<script setup lang=\"ts\">",
			"$3",
			"console.log('');",
			"</script>",
			"",
			"<template>",
			"  $1",
			"</template>",
			"",
			"<style scoped lang=\"scss\">",
			"$2",
			"</style>",
		],
		"description": "Log output to vue3 template2"
	},
}

在vue文件中输入vue3,vue32,回车即可
在这里插入图片描述
生成vue3模版
在这里插入图片描述

生成vue32模版

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1995489.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如意AI健康管理开放域自然对话算法分析报告

一、算法全周期行为分析 1. 算法安全 信息内容安全&#xff1a;通过意图识别和实体抽取技术&#xff0c;确保生成的内容不涉及违法或不当信息。 信息源安全&#xff1a;数据采集环节采用安全措施&#xff0c;保护数据不被非法访问。 2. 算法监测 信息安全监测&#xff1a;实施实…

国产芯上运行TinyMaxi轻量级的神经网络推理库-米尔基于芯驰D9国产商显板

本篇测评由优秀测评者“短笛君”提供。 本文将介绍基于米尔电子MYD-YD9360商显板&#xff08;米尔基于芯驰D9360国产开发板&#xff09;的TinyMaxi轻量级的神经网络推理库方案测试。 算力测试 TinyMaix 是面向单片机的超轻量级的神经网络推理库&#xff0c;即 TinyML 推理库&a…

重头开始嵌入式第十六天(结构体,共用体)

目录 结构体 结构体定义 结构体初始化 结构体赋值 结构体调用 结构体大小 在 C 语言中&#xff0c;结构体内存对齐规则主要遵循以下原则&#xff1a; 共用体 共用体定义 共同体赋值&#xff0c;初始化 共用体大小 结构体与共用体的区别 结构体 在 C 语言中&#xff0c;…

vuex properties of undefined (reading ‘getters‘)

前言&#xff1a; 最近打算用vue 写个音乐播放器&#xff0c;在搞 vuex 的时候遇到一个很神奇报错&#xff1b;vuex 姿势练了千百次了&#xff0c;刚开始的时候我一直以为是代码问题&#xff0c;反复检查了带了&#xff0c;依旧报错。 Error in mounted hook: "TypeError:…

PHP全方位多功能投票小程序系统源码

&#x1f31f;【全民参与&#xff0c;决策更精彩】全方位多功能投票小程序大揭秘&#xff01;&#x1f389; &#x1f680; 开篇引入&#xff1a;投票新风尚&#xff0c;尽在指尖 Hey小伙伴们&#xff0c;你是否厌倦了传统的投票方式&#xff0c;觉得它们既繁琐又不够灵活&am…

历代文学-技术生态-总体介绍

1. 历代文学简介 历代文学&#xff08;https://literature.sinhy.com/#/literature?__c1000&#xff0c;微信小程序可直接搜索“历代文学”&#xff09;是一个由两个人&#xff08;一个后端和一个前端&#xff09;开发的文学网站&#xff0c;是一个收录从古到今、以及古今中外…

C++之运算符重载系列深入学习:从入门到精通!

为什么需要对运算符进行重载 C预定义中的运算符的操作对象只局限于基本的内置数据类型&#xff0c;但是对于我们自定义的类型是没有办法操作的。但是大多时候我们需要对我们定义的类型进行类似的运算&#xff0c;这个时候就需要我们对这么运算符进行重新定义&#xff0c;赋予其…

智能家居中高性能联网通信方案,乐鑫ESP32-S3/C3无线Wi-Fi蓝牙应用

随着科技的飞速发展&#xff0c;智能家居已经不再是科幻小说中的概念&#xff0c;而是走进了千家万户的现实生活。 智能家居是广泛的系统性产品概念&#xff0c;以住宅为载体&#xff0c;运用物联网、网络通信和人工智能等技术&#xff0c;接收信号并判断&#xff0c;提供更加…

美股全线反弹,市场情绪回暖

一、市场概况 昨夜美股三大股指全线收涨&#xff0c;市场情绪明显回暖。道琼斯工业平均指数上涨1.76%&#xff0c;纳斯达克综合指数上涨2.87%&#xff0c;标普500指数则上涨2.3%。美债市场方面&#xff0c;美国十年期国债收益率上涨1.141%&#xff0c;报3.99%&#xff0c;两年…

[ Python ]使用Charles对Python程序发出的Get与Post请求抓包-解决Python程序报错问题

目录 一、前言 二、Charles 三、抓取Python请求 3.1 正常运行 3.2 程序报错 3.2.1 报错信息 3.2.2 解决方法 3.3 取消警告信息 四、总结 一、前言 在Python开发中&#xff0c;网络请求是常见的操作之一。无论是使用内置的urllib库还是第三方库requests&#xff0c;都可…

Java小白入门到实战应用教程-Scanner类及IO流讲解

Java小白入门到实战应用教程-Scanner类及IO流讲解 Scanner类 我们前面写的很多例子都是程序独自执行的&#xff0c;但是我们做编程写代码的目的是要实现能人和代码去交互的。 现在我们就来了解一个知识点&#xff0c;去实现最简单的人和程序的交互。 在java中通过Scanner类…

MySQL第3讲--数据类型和表的修改和删除

文章目录 前言数据类型数值类型整数类型浮点数和定点数 字符串类型字符类型&#xff1a;文本类型&#xff1a;二进制数据类型 日期和时间类型实例分析 表的操作添加字段修改字段删除字段修改表名删除表 DDL总结DDL数据库操作DDL表操作 前言 上一节在MySQL第2讲–关系型数据库以…

kubernetes 管理平台 Pod管理多容器 与嵌入式脚本

资源清单文件 模板与帮助信息 管理资源对象 多容器 Pod 管理多容器 Pod 自定义任务 容器保护策略 宽限期策略 Pod调度策略

CUDA编程从零到壹

如今&#xff0c;当我们谈论深度学习时&#xff0c;为了提高性能&#xff0c;我们通常会将其实现与使用 GPU 联系起来。 GPU&#xff08;图形处理单元&#xff09;最初设计用于加速图像、2D 和 3D 图形的渲染。然而&#xff0c;由于它们能够执行许多并行操作&#xff0c;它们的…

linux 源码部署polardb-x 错误汇总

前言 在linux 源码部署polardb-x 遇到不少错误&#xff0c;特在此做个汇总。 问题列表 CN 启动报错 Failed to init new TCP 详细错误如下 Caused by: Failed to init new TCP. XClientPool to my_polarx#267b21d8127.0.0.1:33660 now 0 TCP(0 aging), 0 sessions(0 runni…

【汇总】测开高频面试题

加油 &#xff01;&#xff01;&#xff01; &#x1f525; 谈谈对测试的理解 我认为测试是发现并及时解决问题&#xff1a;包括功能、性能、用户体验❤️等方面的验证 … 通过提前定位并修复缺陷&#xff0c;可以减少未来维护成本、保障软件质量、提升用户满意度❤️ … 我了…

大麦/猫眼抢票-狠货

大部分购买方式已迁移至手机端&#xff0c;专注研究移动端 小白操作–仅供学习 注意在帐号按权重的第三方账号设置解绑淘宝&#xff0c;否则有可能在抢票时候出现滑块&#xff0c;影响抢票,抢票优先选择大麦 ⚠️核心内容参考&#xff1a; 据悉&#xff0c;在购票环节&…

23_windows 使用sqlmap、kali使用sqlmap,SQL注入、sqlmap自动注入

sqlmap介绍 安装sqlmap 安装python环境 链接&#xff1a;https://pan.baidu.com/s/16QhhYCppSvuUikhKiOHNgg?pwd9LJY 提取码&#xff1a;9LJY C:\Users\leyilea> python // 测试python能不能用 >>> exit() // 退出 测试sqlmap是否可用 kali中运行sqlmap&#xff…

KAN网络简明教程

在不断发展的机器学习领域&#xff0c;最近一篇题为“KAN&#xff1a;柯尔莫哥洛夫-阿诺德网络”的研究论文在爱好者中引发了一波热潮。这种创新方法挑战了多层感知器 (MLP) 的传统观点&#xff0c;为神经网络架构提供了全新的视角。 NSDT工具推荐&#xff1a; Three.js AI纹理…

Qt 实战(9)窗体 | 9.2、QDialog

文章目录 一、QDialog1、基本概念2、常用特性2.1、模态与非模态2.2、数据交互 3、总结 前言&#xff1a; Qt框架中的QDialog类是一个功能强大且灵活的对话框控件&#xff0c;广泛应用于各种GUI&#xff08;图形用户界面&#xff09;应用程序中&#xff0c;用于处理用户输入、消…