vscode配置vue用户代码片段

  1. 打开vscode软件

  2. 选中左下角的设置按钮,再点击用户代码片段(如图)

  3. 在这里插入图片描述

  4. 再选择vue.json文件/新建全局代码片段(如图)
    在这里插入图片描述

  5. 进行相关配置(如下代码)

{
	"Vue2 quickly build template": {
		"prefix": "vue2Init",
		"body": [
		  "<template>",
		  "",
		  "</template>",
		  "",
		  "",
		  "<script>",
		  "  export default {",
		  "    data () {",
		  "      return {",
		  "      }",
		  "    }",
		  "  }",
		  "</script>",
		  "",
		  "",
		  "<style scoped>",
		  "",
		  "</style>"    
		],
	  "description": "vue2快速构建模板"
	 },
	"Vue3 quickly build template": {
		  "prefix": "vue3Init",
		  "body": [
			"<template>",
			"\t<div>\n",
			"\t</div>",
			"</template>\n",
			"<script lang='ts' setup>",
			"import { onMounted, reactive, ref, toRefs, watch } from 'vue'\n",
			"</script>\n",
			"<style lang='scss' scoped>\n",
			"</style>",
			"$2"
		  ],
		  "description": "vue3快速构建模板"
	}
}
  1. 在页面上面如何使用(如图)
    在这里插入图片描述
    在这里插入图片描述
    上图是vue3Init生成的模版

  2. 我配置了两个vue快速构建模版,一个vue2版本,一个vue3版本,觉得有用 喜欢请大家点赞●▽●

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity UI.Image 六边形+流光 Shader

效果图 参考代码 Shader"Custom/HexFlowImage" {Properties{[PerRendererData] _MainTex ("Sprite Texture", 2D) "white" {}_Color ("Tint", Color) (1,1,1,1)_StencilComp ("Stencil Comparison", Float) 8_Stencil (…

SQL | 注释

2-注释 2.1-单行注释 select prod_name -- 这是一条行内注释 from products; 使用两个连字符(-- ) 放在行内&#xff0c;两个连字符后的内容即为注释内容。 # 这是一条注释 select prod_name from products; 这种注释方式可能有些数据库不支持&#xff0c;所以使用前应该…

shiro框架基本概念介绍

目录 什么是Shiro: Shiro的核心功能包括&#xff1a; Shiro主要组件及相互作用&#xff1a; Shiro 认证过程&#xff1a; Shiro 授权过程&#xff1a; 资料获取方法 什么是Shiro: Shiro 是一个强大灵活的开源安全框架&#xff0c;可以完全处理身份验证、授权、加密和会话…

funbox3靶场渗透笔记

funbox3靶场渗透笔记 靶机地址 https://download.vulnhub.com/funbox/Funbox3.ova 信息收集 fscan找主机ip192.168.177.199 .\fscan64.exe -h 192.168.177.0/24___ _/ _ \ ___ ___ _ __ __ _ ___| | __/ /_\/____/ __|/ __| __/ _ |/ …

单源最短路的扩展应用

选择最佳线路 有一天&#xff0c;琪琪想乘坐公交车去拜访她的一位朋友。 由于琪琪非常容易晕车&#xff0c;所以她想尽快到达朋友家。 现在给定你一张城市交通路线图&#xff0c;上面包含城市的公交站台以及公交线路的具体分布。 已知城市中共包含 n 个车站&#xff08;编号…

Azure概念介绍

云计算定义 云计算是一种使用网络进行存储和处理数据的计算方式。它通过将数据和应用程序存储在云端服务器上&#xff0c;使用户能够通过互联网访问和使用这些资源&#xff0c;而无需依赖于本地硬件和软件。 发展历史 云计算的概念最早可以追溯到20世纪60年代的时候&#x…

Stable Diffusion WebUI安装和使用教程(Windows)

目录 下载Stable Diffusion WebUI运行安装程序&#xff0c;双击webui.bat界面启动插件安装&#xff08;github&#xff09;模型下载(有些需要魔法&#xff09;安装过程遇到的大坑总结参考的博客 整个过程坑巨多&#xff0c;我花了一个晚上的时间才全部搞定,本教程针对有编程基础…

网络设备(防火墙、路由器、交换机)日志分析监控

外围网络设备&#xff08;如防火墙、路由器、交换机等&#xff09;是关键组件&#xff0c;因为它们控制进出公司网络的流量。因此&#xff0c;监视这些设备的活动有助于 IT 管理员解决操作问题&#xff0c;并保护网络免受攻击者的攻击。通过收集和分析这些设备的日志来监控这些…

苹果Mac像Windows一样使用

一、将磁盘访问设置的像Windows一样&#xff1a; 1.1、点击任务栏第一个按钮打开“访达”&#xff0c;点击菜单栏上的访达-偏好设置&#xff1a; 1.2、勾选“硬盘”&#xff0c;这样macOS的桌面上就会显示一个本地磁盘&#xff0c;之后重命名为磁盘根&#xff0c;相当于window…

部署Springboot项目注意事项

步骤 步骤 1&#xff1a;将数据库内容在云服务器上的数据库部署一份 我使用mariadb&#xff1b;会出现一些不兼容现象&#xff1b;我们需要把默认值删掉 2&#xff1a;配置文件你得修改地方 a&#xff1a;linux是磁盘区分(像我自己项目用来储存验证码的文件我们得换这个配置;…

Spring_AOP

一、AOP简介 AOP&#xff0c;Aspect Oriented Programming,面向切面编程,是对面向对象编程0OP的升华。OOP是纵向对一个事物的抽象&#xff0c;一个对象包括静态的属性信息&#xff0c;包括动态的方法信息等。而AOP是横向的对不同事物的抽象,属性与属性、方法与方法、对象与对象…

cs231n assignment2 q5 PyTorch on CIFAR-10

文章目录 嫌啰嗦直接看源码Q5 :PyTorch on CIFAR-10three_layer_convnet题面解析代码输出 Training a ConvNet题面解析代码输出 ThreeLayerConvNet题面解析代码输出 Train a Three-Layer ConvNet题面解析代码输出 Sequential API: Three-Layer ConvNet题面解析代码输出 CIFAR-1…

【MongoDB】解决ProxmoxVE下CentOS7虚拟机安装MongoDB6后启动失败的问题

目录 安装步骤&#xff1a; 2.1 配置yum源 2.2 安装MongoDB 2.3 启 动MongoDB ProxmoxVE上新装的CentOS7.4虚拟机&#xff0c;安装MongoDB6。 安装步骤&#xff1a; 2.1 配置yum源 # 创建mongodb yum源&#xff08;https://www.mongodb.com/docs/manual/tutorial/insta…

27岁了学plc还来得及吗?

如果你是学电气或者自控&#xff0c;完全没问题&#xff0c;PLC其实只是你的理解力的问题&#xff0c;真正底层的&#xff0c;都帮你打包了&#xff0c;你直接用就是。问题只是&#xff1a;你要能透彻理解 如果你从一个完全陌生的行业转过来&#xff0c;完全没必要。如果本身就…

[数据分析与可视化] Python绘制数据地图5-MovingPandas绘图实例

MovingPandas是一个基于Python和GeoPandas的开源地理时空数据处理库&#xff0c;用于处理移动物体的轨迹数据。关于MovingPandas的使用见文章&#xff1a;MovingPandas入门指北&#xff0c;本文主要介绍三个MovingPandas的绘图实例。 MovingPandas官方仓库地址为&#xff1a;mo…

自定义批量修改图像位深度

什么是图像位深度&#xff1f;&#xff1f;&#xff1f; 图像位深度(Bit Depth)是指图像中每个像素所占的比特数,它决定了图像能够表示的颜色数量和亮度层级。 简单来说: 位深度越高,每个像素所能表示的颜色数和亮度等级越多。位深度越低,每个像素所能表示的颜色数和亮度等级…

容器安全的常见风险与防护实践

运行在云平台上的容器产品&#xff0c;因为具备一个完整的可移植应用程序环境&#xff0c;能够帮助用户轻松地完成对应用程序的开关控制&#xff0c;提升应用程序的敏捷性&#xff0c;同时节约企业的IT建设成本。在巨大优势作用下&#xff0c;容器产品的采用率在2021年达到了新…

恒运资本:算力股爆发,地产股全线下挫,海外机构调研股出炉

60股近期获海外组织调研&#xff0c;医疗龙头最受组织重视。 今日早盘三大指数全线低开&#xff0c;延续调整走势&#xff0c;上证指数跌1.01%&#xff0c;深证成指跌1.35%&#xff0c;创业板指跌1.6%。AI概念股逆市走强&#xff0c;算力、数据要素等方向领涨&#xff0c;朗威股…

通达信接口调用过程需要借助什么?

通达信接口是一种用于获取、传输和处理股票市场相关数据的软件接口&#xff0c;以提供了一种连接股票市场数据源和数据使用者之间的通道&#xff0c;允许开发者通过编程方式获取股票行情数据、交易数据和相关信息等。如果调用通达信接口&#xff0c;需要借助以下几个方面的工具…

竞赛项目 深度学习的动物识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…