当前位置: 首页 > news >正文

Vue 的两种实现:VSCode 中配置 vue 模板快捷方式的过程

1、创建配置文件:

其一、打开 VSCodeCtrl+Shift+P, 打开搜索框:

在这里插入图片描述

其二、输入:user, 并点击进去 Snippets:Configure User Snippets

在这里插入图片描述

其三、输入 vue3js 并回车:

在这里插入图片描述

其四、打开项目,发现配置文件 vue3js.code-snippets

在这里插入图片描述

2、配置快捷方式:

其一、在该配置文件 vue3js.code-snippets 中输入配置信息:


// 此时生成的代码模板中,只有单引号;
{"Print to console": {"prefix": "v3js","body": ["<template>","  <div></div>","</template>","","<script setup>","import { ref, reactive } from 'vue'","","</script>",	"","<style lang='scss' scoped>","","</style>",],"description": "Log output to console"}
}

// 此时生成的代码模板中,双引号的展示方法(即:模板中展示双引号);
{"Print to console": {"prefix": "v3js","body": ["<template>","  <div></div>","</template>","","<script setup>","import { ref, reactive } from \"vue\"","","</script>",	"","<style lang=\"scss\" scoped>","","</style>",],"description": "Log output to console"}
}

其二、vue3js.code-snippets 配置信息解读:

A、“prefix” 属性指:生成模板的名称;

配置完成后,在 .vue 文件中,输入该字符串后点击回车会生成定义好的模板(即:在 vue3js.code-snippets 中配置的信息);

B、“body”属性指:要生成的代码模板;

可以根据自己实际需求,来配值相应代码模板;

3、测试快捷方式:

其一、测试的过程:

// 此时在 .vue 中输入快捷键: v3js , 然后回车,就能在页面展示在 vue3js.code-snippets 中配置的模板;

在这里插入图片描述

在这里插入图片描述

其二、配置 vue 模板快捷方式的另一种方法:

A、直接在项目种创建 .vscode 文件:

在这里插入图片描述

B、在 .vscode 文件夹种创建 vue3js.code-snippets 文件,并添加配置的 vue 模板的信息:

在这里插入图片描述

在这里插入图片描述

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

相关文章:

Vue 的两种实现:VSCode 中配置 vue 模板快捷方式的过程

1、创建配置文件&#xff1a; 其一、打开 VSCode &#xff0c;CtrlShiftP, 打开搜索框&#xff1a; 其二、输入&#xff1a;user, 并点击进去 Snippets:Configure User Snippets 其三、输入 vue3js 并回车&#xff1a; 其四、打开项目&#xff0c;发现配置文件 vue3js.code-sn…...

electron 切换至esm

前言 好消息&#xff0c;经过不知道多少年的讨论。 electron28.0.0开始&#xff08;23.08.31&#xff09;&#xff0c;默认支持esm了。 see https://github.com/electron/electron/issues/21457 使用方法 升级至electron^28.0.0简单地在package.json中添加"type":…...

【新版】软考 - 系统架构设计师(总结笔记)

个人总结学习笔记&#xff0c;仅供参考&#xff01;&#xff01;&#xff01;! →点击 笔者主页&#xff0c;欢迎关注哦&#xff08;互相学习&#xff0c;共同成长&#xff09; 笔记目录 &#x1f4e2;【系统架构设计系列】系统架构设计专业技能 计算机组成与结构操作系统信…...

Spring MVC 方法中添加参数、HttpServletRequest 和 HttpServletResponse 对象

在这个例子中&#xff0c;我们添加了 HttpServletRequest 和 HttpServletResponse 对象作为控制器方法的参数。这样&#xff0c;你就可以在方法内部同时访问请求参数、请求对象和响应对象&#xff0c;从而进行更灵活的 HTTP 请求和响应处理。 RestController public class MyC…...

单片机的RTC获取网络时间

理解网络同步校准RTC的原理需要考虑NTP、SNTP、RTC这三个关键组件的作用和交互。下面详细解释这个过程&#xff1a; 1. NTP&#xff08;Network Time Protocol&#xff09;&#xff1a; 协议目的&#xff1a;NTP是用于同步计算机和设备时钟的协议。它通过在网络上与时间服务器通…...

Android 13 内置可卸载的搜狗输入法

环境 系统&#xff1a;Android 13 芯片厂商&#xff1a;展锐 需求 默认只有英文输入法&#xff0c;没有中文&#xff0c;需要中文输入法&#xff0c;且可以卸载的。 实测为搜狗输入法&#xff0c;百度等其它输入法也同样适用。 实现 在SDK目录中创建packages/apps/SogouIM…...

持续集成交付CICD:GitLabCI 封装Python类 并结合 ArgoCD 完成前端项目应用发布

目录 一、实验 1. 环境 2. Python代码实现获取文件 3.Python代码实现创建文件 4.Python代码实现更新文件 5.GitLab更新库文件与运行流水线 6.ArgoCD 完成前端项目应用发布 二、问题 1.Python获取GitLab指定仓库文件报错 2. K8S master节点运行Python代码报错 一、实验…...

第十三章 常用类(Math 类、Arrays 类、System类、Biglnteger 和BigDecimal 类、日期类)

一、Math 类&#xff08;P481&#xff09; Math 类包含&#xff0c;用于执行基本数学运算的方法&#xff0c;如初等指数、对数、平方根和三角函数。 &#xff08;1&#xff09;abs&#xff1a;绝对值 &#xff08;2&#xff09;pow&#xff1a;求幂 &#xff08;3&#xff09;c…...

2023年12月24日学习总结

今日to do list&#xff1a; 做kaggle上面的流量预测项目☠️ 学习时不刷手机&#x1f921; okkkkkkkkkkkkkk 开始&#x1f44d;&#x1f34e; 0、我在干什么&#xff1f; 我在预测一个名字叫做elborn基站的下行链路流量&#xff0c;用过去29天的数据预测未来10天的数据 1、…...

第26关 K8s日志收集揭秘:利用Log-pilot收集POD内业务日志文件

------> 课程视频同步分享在今日头条和B站 大家好&#xff0c;我是博哥爱运维。 OK&#xff0c;到目前为止&#xff0c;我们的服务顺利容器化并上了K8s&#xff0c;同时也能通过外部网络进行请求访问&#xff0c;相关的服务数据也能进行持久化存储了&#xff0c;那么接下来…...

芯科科技以卓越的企业发展和杰出的产品创新获得多项殊荣

2023年共获颁全球及囯內近20个行业奖项 Silicon Labs&#xff08;亦称“芯科科技”&#xff09;日前在全球半导体联盟&#xff08;Global Semiconductor Alliance&#xff0c;GSA&#xff09;举行的颁奖典礼上&#xff0c;再次荣获最受尊敬上市半导体企业奖&#xff0c;这是公…...

计算机视觉基础(11)——语义分割和实例分割

前言 在这节课&#xff0c;我们将学习语义分割和实例分割。在语义分割中&#xff0c;我们需要重点掌握语义分割的概念、常用数据集、评价指标&#xff08;IoU&#xff09;以及经典的语义分割方法&#xff08;Deeplab系列&#xff09;&#xff1b;在实例分割中&#xff0c;需要知…...

CNAS中兴新支点——什么是软件压力测试?软件压力测试工具和流程

一、含义&#xff1a;软件压力测试是一种测试应用程序性能的方法&#xff0c;通过模拟大量用户并发访问&#xff0c;测试应用程序在压力情况下的表现和响应能力。软件压力测试的目的是发现系统潜在的问题&#xff0c;如内存泄漏、线程锁、资源泄漏等&#xff0c;以及在高峰期或…...

jQuery: 整理3---操作元素的内容

1.html("内容") ->设置元素的内容&#xff0c;包含html标签&#xff08;非表单元素&#xff09; <div id"html1"></div><div id"html2"></div>$("#html1").html("<h2>上海</h2>") …...

22、商城系统(四):项目jar包配置(重要),网关配置,商品服务基础数据设置

目录 0.重要:整个项目的配置 最外层的pom.xml renren-fast renren-generator xpmall-common xpmall-coupon...

循环链表的学习以及问题汇总

[TOC](循环链表常见的问题) # 问题一&#xff1a; **报错** ![报错内容](https://img-blog.csdnimg.cn/direct/57a4dcc6993a495c8db9c3dbfade4a78.png) **报错原因&#xff1a;**因为没有提前对_tag_CircleListNode重命名为CircleListNode&#xff0c;所以&#xff0c;在定义…...

C++期末复习总结继承

继承是软件复用的一种形式&#xff0c;他是在现有类的基础上建立新类&#xff0c;新类继承了现有类的属性和方法&#xff0c;并且还拥有了其特有的属性和方法&#xff0c;继承的过程称为派生&#xff0c;新建的类称为派生类&#xff08;子类&#xff09;&#xff0c;原有的成为…...

CloudCanal x Debezium 打造实时数据流动新范式

简述 Debezium 是一个开源的数据订阅工具&#xff0c;主要功能为捕获数据库变更事件发送到 Kafka。 CloudCanal 近期实现了从 Kafka 消费 Debezium 格式数据&#xff0c;将其 同步到 StarRocks、Doris、Elasticsearch、MongoDB、ClickHouse 等 12 种数据库和数仓&#xff0c;…...

Nodejs+Express搭建HTTPS服务

最近开发需要搭建一个https的服务&#xff0c;正好最近在用nodejs和express&#xff0c;于是乎想到就近就使用这两东西来搭建一个https的服务吧。这里搭建过程总共需要两步&#xff0c;第一步生成证书&#xff0c;第二步使用https模块启动服务。 生成自签名证书 这里因为是自…...

设计模式之-策略模式,快速掌握策略模式,通俗易懂的讲解策略模式以及它的使用场景

系列文章目录 设计模式之-6大设计原则简单易懂的理解以及它们的适用场景和代码示列 设计模式之-单列设计模式&#xff0c;5种单例设计模式使用场景以及它们的优缺点 设计模式之-3种常见的工厂模式简单工厂模式、工厂方法模式和抽象工厂模式&#xff0c;每一种模式的概念、使用…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...