首页 > 其他分享 >vscode快捷输入vue2,vue3,模板

vscode快捷输入vue2,vue3,模板

时间:2023-11-07 11:11:50浏览次数:29  
标签:body console description vscode prefix vue2 vue3


{
	// 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"
	// }

	"Print to console vue2": {
		"prefix": "vue2",        //键入该值,按tab快捷产生
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"<script>",
			"export default {",
			"	components: {},",
			"	props: {},",
			"	data() {",
				"		return {};",
				"	},",
				"	computed: {},",
				"	created() {},",
				"	mounted() {},",
				"	methods: {},",
				"	watch: {},",
			"};",
			"</script>",
			"<style scoped lang='scss'>",
			"</style>",
			"$2"
		],
		"description": "Log output to console"
	},

	"Print to console vue3": {
		"prefix": "vue3",        //键入该值,按tab快捷产生
		"body": [
			"<script setup lang='ts'>",
			"import { reactive, watch, ref } from 'vue'",
			"	",
			"</script>",
			"<template>",
			"	",
			"</template>",
			"<style scoped lang='scss'>",
			"</style>",
			"$3"
		],
		"description": "Log output to console"
	}
}

标签:body,console,description,vscode,prefix,vue2,vue3
From: https://www.cnblogs.com/yoona-lin/p/17814570.html

相关文章

  • 数据可视化 - 使用swiper制作滚动表格[vue3]
    html部分1<divclass="scroll-table">2<divclass="scroll-table-header">3<tableclass="scroll-table-header__table">4<colgroup>5<col......
  • wsl wangEdit 的使用与注意事项( vue2 版本)
    注:vue2版本的nodeJs版本有限制,要是16或者17;1.安装wangEditoryarnadd@wangeditor/editor@wangeditor/editor-for-vue 2.使用示例<template><divstyle="border:1pxsolid#ccc;"><!--工具栏--><Toolbarstyl......
  • vue 2 升级vue3 前端老白
    vue2升级vue3前端老白原文链接:Vue3已经发布,而Vue2到Vue3的升级需要一些注意点。本文将介绍Vue2升级到Vue3的具体步骤,让您在升级中无后顾之忧。首先,我们需要升级VueCLI到4.x。在升级前,我们需要备份项目代码,以防出现意外情况。接着,我们需要在命令行中输入以下命令:npminst......
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局......
  • uniApp:使用vue3+Vite4+pinia+sass技术栈构建(02)-封装api请求
    前言在纯vue3开发的时候,使用axios进行api请求,但在uniapp中还需要安装axios的适配器uniapp-axios-adapter,否则小程序或者app请求不兼容。文档地址uniapp-axios-adapter-DCloud插件市场但在这里我们不使用axios,而是使用uniapp提供的请求方法uni.request进行封装。uni.request方......
  • 基于[email protected]的Vue3 PDF在线预览
    目录认识vue3-pdf-app安装vue3-pdf-app代码子组件封装:PdfView.vue父组件调用:index.vue中文配置文件viewer.properties本文参考来自于CSDN作者theMuseCatcher《Vue3PDF预览(vue3-pdf-app)》认识vue3-pdf-appvue3-pdf-app的npm官方链接点我访问vue3-pdf-app的github仓......
  • vue3.0 + ts 实现上传工厂(oss与cos)
    概述将上传基类命名为MOS(MineObjectStorage)mos.ts代码import{MosType}from'./mosConfig'import{Loading}from'../loading'import{typeBinaryFile,typeMosFile}from'./fileUtil'importtype{PathTemplate}from'./pathTempla......
  • Vue3 中的hook函数和 toRef(toRefs)
    一、自定义hook函数  1、什么是hook?      本质是一个函数,把setup函数中使用的CompositionAPI进行了封装  2、类似于vue2.x中的mixin  3、自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。二、toRef  1、作用:创建一个ref对象,其valu......
  • Vue3的生命周期
    1、setup():开始创建组件之前,在beforeCreate和created之前执行,创建的是data和method2、onBeforeMount():组件挂载到节点上之前执行的函数;3、onMounted():组件挂载完成后执行的函数;4、onBeforeUpdate():组件更新之前执行的函数;5、onUpdated():组件更新完成之后......
  • Vue3 echarts 组件化使用 resizeObserver
    点击查看代码constresizeObserver=ref(null);//进行初始化和监听窗口变化onMounted(async()=>{awaitnextTick(()=>{initChart();setOptions(options.value,opts.value??true);});window.addEventListener('resize',handleResize);resizeO......