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

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

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

相关文章

提示“由于找不到mfc140u.dll,无法继续执行代码”如何解决?

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是找不到某个动态链接库文件&#xff0c;比如mfc140u.dll。这个问题可能会导致某些应用程序无法正常运行或打开。 一、关于找不到mfc140u.dll文件造成会的问题 mfc140u.dll是Visual C中的一个…

Shell三剑客:awk(格式化输出)

一、格式符 %d 十进制有符号整数 %u 十进制无符号整数 %f 浮点数 %s 字符串 %c 单个字符 %p 指针的值 %e 指数形式的浮点数 %x %X 无符号以十六进制表示的整数 %o 无符号以八进制表示的整数 %g 自动选择合适的表示法 % % 显示%自身 # [.#] 第一个数…

python脚本传参

sys.argvargparse 第一种&#xff1a;argparse 简单使用&#xff1a; import argparse # 创建一个参数解析实例 parser argparse.ArgumentParser(descriptionParameters) # 添加参数解析 parser.add_argument(--training_epoch, typeint, default3000) parser.add_argument(…

使用Python计算二维截面的惯性矩和面积,中间带洞的截面也可计算,代码

因为最近到土木行业了&#xff0c;所以要计算二维截面的惯性矩和面积&#xff0c;用迈达斯太low了&#xff0c;所以想自己写python代码计算。前言 主要思路是三角网划分&#xff0c;然后计算每个小三角的惯性矩和面积&#xff0c;求和得到最终截面的惯性矩和面积。 python中可…

Ubuntu 常用命令之 chown 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 chown 命令在 Ubuntu 系统中用于改变文件或目录的所有者和组。这个命令的基本格式是 chown [选项]... [所有者][:[组]] 文件...。 chown 命令的主要参数有 -c 或 --changes&#xff1a;类似 verbose&#xff0c;但只在发生改变时…

解决xcode 运行不老iPhone 15 iOS 17.1 设备的问题

问题 最近要查看一下ios 17.1的设备的性能&#xff0c;但是当前版本的Xcode运行不了 解决方法 1、更新Xcode版本到15.1以上 2、更新完成后&#xff0c;大概率出现这个情况 原因&#xff1a;在app Store中更新到Xcode15后,运行不了模拟器和真机.需要下载iOS 17对应的模拟器.&…

Linux基本内容学习

Linux 命令 文件命令 命令释义语法格式lslist&#xff0c;用于显示目录中文件及其属性信息ls [参数名] [文件名]cdchange directory&#xff0c;用于更改当前所处的工作目录&#xff0c;路径可以是绝对路径&#xff0c;也可以是相对路径&#xff0c;若省略不写则会跳转至当前…

前端案例—antdDesign的Select多选框组件加上全选功能

前端案例—antdDesign的Select多选框组件加上全选功能。 实现效果如下&#xff1a; Select 组件里有这个属性&#xff0c;可以利用这个对下拉菜单进行自定义。 const handleChange (e, value) > {setSelectState(e.target.checked)let arr productOptions?productOption…

HarmonyOS应用事件打点开发指导

简介 传统的日志系统里汇聚了整个设备上所有程序运行的过程流水日志&#xff0c;难以识别其中的关键信息。因此&#xff0c;应用开发者需要一种数据打点机制&#xff0c;用来评估如访问数、日活、用户操作习惯以及影响用户使用的关键因素等关键信息。 HiAppEvent 是在系统层面…

【JavaWeb学习笔记】14 - 三大组件其二 Listener Filter

API文档JAVA_EE_api_中英文对照版 Listener 一、监听器Listener 1. Listener监听器它是JavaWeb的三大组件之一。 JavaWeb的三大组件分别是: Servlet程序、Listener监听器、Filter过滤器 2. Listener是JavaEE的规范&#xff0c;就是接口 3.监听器的作用是&#xff0c;监听某…

稳定币分析的 3 个关键指标

作者&#xff1a;lesleyfootprint.network 数据源&#xff1a;The Stablecoin Dashboard 稳定币因其固有特性而在加密货币领域中独树一帜&#xff0c;它们的特点是价格与特定的参考资产&#xff08;通常是美元或欧元等法定货币&#xff09;锚定。这种锚定机制的目的是缓解数字…

Pytorch常用的函数(五)np.meshgrid()和torch.meshgrid()函数解析

Pytorch常用的函数(五)np.meshgrid()和torch.meshgrid()函数解析 我们知道torch.meshgrid()函数的功能是生成网格&#xff0c;可以用于生成坐标&#xff1b; 在numpy中也有一样的函数np.meshgrid()&#xff0c;但是用法不太一样&#xff0c;我们直接上代码进行解释。 1、两者…