VScode 创建vue文件代码生成模板

会飞的蚂蚁Sidnat

已于 2022-06-13 14:27:37 修改

阅读量210

点赞数 1

文章标签： vue.js vscode javascript

于 2022-06-13 14:24:16 首次发布

本文链接：https://blog.csdn.net/m0_48218584/article/details/109431735

版权

选择File -> Preferences -> Configure User Snippets

在这里插入图片描述

选择新建代码片段

在这里插入图片描述

我这里命名为vue-starter

在这里插入图片描述

创建完成后会给你一个实例，可以参照着写自己的代码

把注释删掉，填写自己的模板
prefix中填写的就是快捷指令

{
	"Print to console" : {
		"prefix": "vue3",
		"body": [
			"<!-- 测试$0 -->",
			"",
			"<script setup>",
			"  import { ref } from 'vue'",
			"  const count = ref(0);",

			"  function plus() {",
			"    ++count.value;",
			"  }",
			"</script>",
			"",
			"<template>",
			"  <div>",
			"    <button @click='count++'>{{ count }}</button>",
			"    <button @click='plus'>{{ count }}</button>",
			"  </div>",
			"</template>",
			"",
			"<style>",
			"</style>"
		],
		"description": "vue3文件生成模板"
	}
}