[JavaScript知识库] 在vscode中的vue文件中配置vue3初始化快捷代码

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 在vscode中的vue文件中配置vue3初始化快捷代码 -> 正文阅读

[JavaScript知识库]在vscode中的vue文件中配置vue3初始化快捷代码

1.点击设置——用户代码片段

2.新建代码片段

会生成一个xxx.code-snippets文件

3.在文件里面输入以下代码

第一种：

{
	"demo":{
		"prefix":"v3",
		"body": [
			"<template>",
			"\t",
			"</template>",
			"",
			"<script lang='ts'>",
			"import { defineComponent } from 'vue'",
			"export default defineComponent({",
			"\tsetup () {",
			"\t\t$0",
			"\t\treturn {\n",
			" ",
			"\t\t}",
			"\t}",
			"})",
			"</script>",
			" ",
			"<style lang = \"less\" scoped>",
			"\t",
			"</style>"
		],
		"description": "自定义的一个vue代码片段"
	}
}

在vue文件里面输入vue3就会快捷生成如下代码

第二种：

{
	"demo":{
		"prefix":"v3",
		"body": [
			"<template>",
			"\t",
			"</template>",
			"",
			"<script lang='ts' setup>",
			"import {  } from 'vue'",
			"\t\t$0",
			"</script>",
			" ",
			"<style lang = \"less\" scoped>",
			"\t",
			"</style>"
		],
		"description": "自定义的一个vue代码片段"
	}
}

在vue文件里面输入vue3就会快捷生成如下代码