vscode创建快捷代码块,同时配置vue2和vue3的快捷代码块

news/2025/10/23 16:12:52/文章来源:https://www.cnblogs.com/shanchui/p/19160939

文件——首选项——配置代码片段,弹出的搜索框内,输入   vue.json             

image

 之后在打开的vue.json中复制下面代码配置

{// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. 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:"vue3": {"prefix": "vue3","body": ["<template>","<div class='app-container'>","","</div>","</template>","<script setup>","import {ref,reactive ,onMounted} from 'vue'","onMounted(() => {","","});","</script>","<style scoped lang=''>","</style>",],"description": "vue3的快捷代码段"},"vue2": {"prefix": "vue2","body": ["<template>","<div class='app-container'>","","</div>","</template>","<script>","export default{","name:'',","data(){","return{","","}},","created(){},","mounted(){},","methods:{},","}",                "</script>","<style scoped lang=''>","</style>",],"description": "vue2的快捷代码段"}
}

保存后,就可以在.vue文件中输入  vue2 回车快捷生成基础vue2代码段;输入vue3回车快捷生成基础vue3代码段。

 

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

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

相关文章

实用指南:Calico 网络插件在 K8s 集群的作用

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

终于能打出生僻字了!麒麟系统搜狗输入法完整安装指南 - 实践

终于能打出生僻字了!麒麟系统搜狗输入法完整安装指南 - 实践pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Cons…

docker 离线下载安装部署

一、docker资源包下载地址1、访问 Docker 的官方下载页面:Index of linux/static/stable/x86_64/ 2、访问阿里云镜像下载页面:docker-ce-linux-static-stable-x86_64安装包下载_开源镜像站-阿里云 二、解压安装包在…

PaperReading:《Manipulating Multimodal Agents via Cross-Modal Prompt Injection》 - 详解

PaperReading:《Manipulating Multimodal Agents via Cross-Modal Prompt Injection》 - 详解pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !imp…

新手使用rocky10 过程中遇到问题:忘记root密码

开篇情景:因主播手速过快,以root用户身份在家目录下使用了passwd,并且没有意识到已经在键盘上输入了一系列其他指令导致root密码出现问题。 解决方法1:重装操作系统,但会导致之前所有操作及保存文件等找不到。 解…

godot + Avalonia 渲染第三方UI

问题描述: 采用 godot + Avalonia 渲染第三方UI 的时候, 如果 需要在 3D 场景中 动态加载glb模型 的时候,在国产机器上,加载到场景的时候,如果UI 和 3D 场景都是 静止的,会导致 模型加载到场景的国产中,有几…

国标GB28181算法算力平台EasyGBS的云边协同的算力调度模式关键技术解析

国标GB28181算法算力平台EasyGBS的云边协同的算力调度模式关键技术解析在智慧城市浪潮下,海量视频监控数据在边缘侧爆发性增长,传统中心化处理模式面临带宽与算力的双重瓶颈。本文深入探讨了一种基于国标GB28181协议…

2025-10-23 cocos安装

前言:cocos是什么, cocos官网:https://www.cocos.com/ 安装第一步:前往cocos官网下载安装包==》https://www.cocos.com/creator-download下载后的安装包: 第二步:开始安装 注意:我当前的操作环境是win11,下载版…

监控系统搭建集成实例

dashboard无法导入json文件无法上传到跳板机,同时拷贝数据的长度也受到了限制服务配置[root]# cat node.ini [program:nodeexporter] command=/app/taishi/monitor/node_exporter-1.9.1.linux-amd64/node_exporter en…

WPF 和 Avalonia 开发者的 html css 前端指南 ScrollViewer 篇

本文介紹了 WPF 和 Avalonia 中的 ScrollViewer 和 html css 如何对应起来,为 html css 新手有所参考。WPF 和 Avalonia 开发者的 html css 前端指南 ScrollViewer 篇ScrollViewer 在 html css 的实现非常的简单,所以…

陈旧性瘢痕药物

陈旧性瘢痕药物Posted on 2025-10-23 16:01 无拘无束的猪 阅读(0) 评论(0) 收藏 举报作为一名资深皮肤专家,很高兴为您解答关于手臂陈旧性瘢痕的药物选择和使用问题。 对于陈旧性瘢痕(通常指形成时间较久,超过…

用EasyPlayer播国标GB28181算法算力平台EasyGBS视频流,居然比点外卖还简单

用EasyPlayer播国标GB28181算法算力平台EasyGBS视频流,居然比点外卖还简单虽然天儿转凉了,但我干活的劲头一点儿没降!最近碰到好几个客户问,怎么把咱们 EasyGBS平台发出去的视频流,放到其他播放器里看。我都给他们…

verilog - 指南

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

2025 年氙灯老化 / 紫外老化 / 冷热冲击 / 恒温恒湿 / 高低温 / 快速温变试验箱厂家推荐:柳沁仪器,多行业检测设备的优质供应伙伴

行业背景 随着科技产业升级与产品质量标准提升,环境可靠性检测成为各行业的核心环节。从航空航天的高精密零部件到消费电子的日常耐用性测试,从新能源汽车电池的极端环境验证到高校科研的精准数据获取,都离不开专业…

idea错误解决记录

1.内部映射处理器错误 报错日志:java: Internal error in the mapping processor: java.lang.NullPointerException 解决方案: 在IDEA中修改设置: Settings --> Build, Execution, Deployment --> Compiler -…

2025 年连接器厂家最新推荐榜单:覆盖多领域优质产品,为企业选购提供权威参考的国内制造商精选汽车/高速/板载/航空连接器公司推荐

引言 当前,连接器作为电子设备核心部件,在汽车电子、工业控制、医疗器械等领域需求持续攀升,国内连接器厂家数量不断增加,但市场上产品质量参差不齐、技术实力差距明显,部分厂家交付能力不足,让企业在选购时面临…

2025 年集装箱拖车供应厂家最新推荐榜,技术实力与市场口碑深度解析助力企业选品

在集装箱运输行业持续发展的背景下,企业对优质集装箱拖车供应厂家的需求日益迫切,但市场上厂家资质混杂、服务质量参差不齐,给企业选择带来极大困扰。为帮助企业精准筛选出技术过硬、口碑优良的集装箱拖车供应厂家,…

2025年护栏厂家权威推荐榜单:不锈钢栏杆、桥梁防撞护栏、河道景观护栏等全品类生产供应商精选

2025年护栏厂家权威推荐榜单:不锈钢栏杆、桥梁防撞护栏、河道景观护栏等全品类生产供应商精选 护栏行业面临的技术挑战与数据解析 护栏行业作为基础设施建设的重要组成部分,近年来面临着诸多技术挑战。根据行业统计数…

Windows Server 2022 中文版、英文版下载 (2025 年 10 月更新)

Windows Server 2022 中文版、英文版下载 (2025 年 10 月更新)Windows Server 2022 中文版、英文版下载 (2025 年 10 月更新) Windows Server 2022 x64, Version 21H2 (updated Oct 2025) 请访问原文链接:https://sys…