VS code 设置vue文件模版

第一步,进入User Snippets

方法一: File --> Preferences --> User Snippets
在这里插入图片描述
方法二:左下角齿轮 —> User Snippets
在这里插入图片描述

进入设置

User Snippets 里输入vue, 选择 vue.json (有的vscode 版本是vue),进入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:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"vue template":{
		"prefix":"vue",
		"body":[
			"<template>",
			"<div ></div>",
			"</template>",
			"<script>",
			"export default {",
			"name:'$1',",
			"filters:{},",
			"mixins:[],",
			"components: {},",
			"data() {",
			"return {}",
			"},",
			"computed: {},",
			"watch: {},",
			"beforeCreate() {},",
			"created() {",
			"},",
			"beforeMount() {},",
			"mounted() {",
			"},",
			"beforeUpdate() {},",
			"updated() {}, ",
			"beforeDestroy() {},",
			"destroyed() {},",
			"activated() {},",
			"methods: {}",
			"}",
			"</script>",
			"<style lang='scss' scoped>",
			"</style>"
		],
		"description": "vue template"
	}
}

热门文章

暂无图片
编程学习 ·

JVM(一)--JVM的内存区域划分以及相关知识点

JVM(一)–JVM的内存区域划分以及相关知识点 一、JVM的内存区域是怎么划分的? JVM结构图JVM = 类加载器 + 执行引擎 + 运行时数据区类加载器(Class Loader):把硬盘上的class文件加载到JVM中的运行时数据区域,它不负责这个类文件是否能够执行 执行引擎(Execution Engine):…
暂无图片
编程学习 ·

Java中的反射(1)

Java中的反射 一、概念: 1、反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。 2、反射 (Reflection) 是 Java 的特…
暂无图片
编程学习 ·

2020年6月份所有文章汇总

历史汇总:2020年5月份所有文章汇总 2020年4月份所有文章汇总 2020年3月份所有文章汇总 2020年2月份所有文章汇总 2020年1月份所有文章汇总 2019年度所有文章汇总 2018年度所有文章汇总2020年6月份原创文章:写简历没模板?别怕,这些开源项目帮你搞定! 推荐几款基于 Markdown…
暂无图片
编程学习 ·

浅析原型模式中的clone()

更多精彩文章请访问我的个人博客(zhuoerhuobi.cn)最近学习到设计模式中的原型模式,在学习过程中,产生了对clone()实现的原理和效率的兴趣。原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能。这种类型的设计模式属于创建型模式,它提供了一种创建对象的…
暂无图片
编程学习 ·

查找序列元素(链表)

查找序列元素(链表) 问题描述: 使用带头结点的单链表编程: 一群学生排成一行,输入一个学号,请确定该学号学生所在的位置。 输入说明: 第一行输入学生信息: 第一个整数n(0<=n<=100),表示共有n个学生,其后有n个整数,表示n个 学生的学号 第二行及以后各行,…
暂无图片
编程学习 ·

mac mysql更改了目录所遇到的坑

之前安装的目录为/usr/local/develope/mysql后来改了下目录 同时也改了MySQL文件夹名现在为/usr/local/develope/develop/mysql5.6 同时data目录还是在的配置文件已经修改 MySQL在安装或者启动的时候没有指定配置文件时候 默认找的配置文件/etc/my.cnf将basedir目录和data目录修…
暂无图片
编程学习 ·

爬虫工作的代理ip选择

代理ip的使用是爬虫工作必须使用的爬取辅助工具,大数据的快速发展,很多的网站不断的维护自己的网站信息,开始设置反爬虫机制,在网站进行反爬虫限制的情况下,怎样通过反爬虫机制,提高工作效率。一:使用多线程与代理ip1、多线程方式:多线程同时开展工作采集,迅速提高工作…
暂无图片
编程学习 ·

Node.Js+React.Js+Git的基本开发环境配置

1、基本开发环境的配置 主要包括node.Js的基本安装、React的基本安装、GIT的安装以及git可视化工具sourceTree的基本安装。 (1)node.Js的安装 官网搜索node.Js,下载安装包,进行傻瓜式安装(点击下一步就可以)。(2)React的基本安装 首先创建一个项目文件夹, cd 到需要创…
暂无图片
编程学习 ·

RocketMQ 5:消息重试

1.创建消费者RetryConsumer,使用consumer.setMaxReconsumeTimes()方法可以设置重试次数,默认15次,返回ConsumeConcurrentlyStatus.RECONSUME_LATER;消费失败后,先会进入%RETRY%group1中,再到这个ConsumerGroup。而如果一直这样重复消费都持续失败超过重试次数,就会投递到D…
暂无图片
编程学习 ·

Jmeter学习

官网下载的Jmeter5.1的包,Ubuntu控制台运行./jmeter.sh即可运行。简体中文版。在了解常用元件后,再记录一些常用手段1.集合点,瞬间施压,峰值测试在添加->定时器->同步定时器,可以设置让一定数量的线程于同一时刻发起的请求。2.参数化,不同输入参数可以添加->配置…
暂无图片
编程学习 ·

火狐浏览器网页不显示文字内容

网页的内容是个表格。表头只显示了 一部分内容。问题页面如下:但是在谷歌浏览器里显示正常。然后发现火狐里面多个标签他只显示一行,后面的都消失了。改好后效果如下:
暂无图片
编程学习 ·

线程池

目录概念优点架构线程池三种常用创建方式newFixedThreadPoolnewSingleThreadExecutornewCachedThreadPool线程池底层原理线程池工作流程线程池的拒绝策略自定义线程池 概念 线程池主要是控制运行线程的数量,将待处理任务放到等待队列,然后创建线程执行这些任务。如果超过了最…
暂无图片
编程学习 ·

算法 动态规划 0-1背包

动态规划2 给定n种物品和1个背包,物品i的重量是wi,其价值为vi,背包的容量为C。要求选择装入背包的物品,使得装入背包中物品的总价值最大。 例如5个物品,wi[] = { 2,4,6,3,8},vi[]={6,6,3,7,5},背包的容量为10 #include<iostream> using namespace std; #include<…
暂无图片
编程学习 ·

mysql表碎片回收

1、alter table t engine = innodb;重建整个表,对于支持online ddl的版本,当线上进行操作的时候要调大innodb_online_alter_log_max_size参数,因为该参数会记录ddl过程中的dml操作,而此临时文件存放在临时排序区(innodb_sort_buffer_size),innodb_sort_buffer_size参数上…
暂无图片
编程学习 ·

&& 、 ||和!! 运算符分别能做什么?

很明显这几个都是逻辑运算符!基本用法我就不说了,自己去看文档,先看几个简单的例子吧! var a = null,b = 10; if (b >= 10) {a = 1; } else if (b >= 20) {a = 2; } else if (b >= 30) {a = 3; } else if (b >= 40) {a = 4; };这样写是不是很难看,有些人还会用 …
暂无图片
编程学习 ·

RetinaNet(基于resnet50和fpn)的tensorboard网络架构图

采用网络的backbone部分,为了能运行tensorboard,所以必须要是完整的网络,所以结尾采用提取有效特征层P7(tensor类型),进行Flatten拉平,然后接了一层全连接,使用虚拟数据进行空跑,才能进入tensorboard。 Keras和TF是可以互通,使用tf.keras更加方便,中间可以嵌套tf,使…
暂无图片
编程学习 ·

[TypeScript] - TypeScript官方文档学习笔记-接口-上(二)

前言 接口只是在语法层面限制写法,从而使部分语句写法不出现,本质是语法规范 接口 TypeScript中接口用来定义结构类型,出于类型检查需要 编译转换后接口消失,仅用于语法检查 普通对象传入: function printLabel(labeledObj: { label: string }) {console.log(labeledObj.l…
暂无图片
编程学习 ·

疫情下的舆情预测系统工作报告part.4

项目地址:https://github.com/Lee991211/Innovation_training.git数据清洗 当获取了大量的微博数据,需要对冗余数据进行清洗,使数据满足一定格式,以达到模型训练的要求@杨涛同学。当然这个任务相对于爬取就比较简单了,出于保存数据备份的想法,我的清洗脚本分为两步。 was…