vscode 创建模板

Florenza

已于 2022-11-24 10:44:17 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：问题解决文章标签：前端 javascript 开发语言

于 2022-08-12 16:11:21 首次发布

本文链接：https://blog.csdn.net/qq_33839972/article/details/126306201

问题解决专栏收录该内容

47 篇文章

订阅专栏

本文介绍如何自定义Vue3项目的模板，通过配置特定的JSON文件，实现快速生成包含基本结构及常用导入语句的.vue文件。这有助于提升开发效率并保持代码风格一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预期:做一个自定义的vue3的模板

预期效果如下当输入 vue3的时候自定义出自己的模板

首先在

输入vue.json 注:这里的vue 只得是文件名为 .vue才会联想出来你的快捷键

最后创建模板

{
	"snippetName": {
		"prefix": "vue3",
		"body": [
			"<template>",
			  "\t<div class=\"\">",
				"\t</div>",
			"</template>",
			"<script lang=\"ts\">",
			"import { defineComponent,reactive,toRefs,onMounted } from 'vue'",
			"export default defineComponent({",
			    "\tsetup(){",
			        "\t\tconst dataMap=reactive({",
			       " \t\t})",
			       "\t\tonMounted(()=>{",
			        "\t\t})",
			        "\t\treturn{",
			        " \t\t\t...toRefs(dataMap)",
			        "\t\t}",
			    "\t}",
			"})",
			"</script>",
			"<style lang=\"scss\" scoped>",
			"</style>"
		],
		"description": "快速创建在html5编写的vue模板"
	},
	"snippetName2": {
		"prefix": "vue3setup",
	"body": [
		"<template>",
		"\t<div class=\"\">",
		  "\t</div>",
	  "</template>",
		"<script setup>",
		"import { reactive } from 'vue';",
		"const router=useRouter()",
		"const dataMap=reactive({",
		"})",
		"</script>",
		"<style lang=\"scss\" scoped>",
		"</style>"
	],
	"description": "vue3 ts setup"
	}
	
}