vsCode怎么使用vue指令快捷生成代码

1.下载Vetur插件

2.在文件-首选项-配置代码片段中找到vue.json文件

(注:旧版本的编辑器路径为文件-首选项-用户片段)

3.在打开的配置代码片段弹窗中搜索vue.json,找到并打开

(注:如果搜不到的话就按住鼠标滚轮往下滑,一般位置在滚动条滚动到底部时的最后几个配置文件)

4.将vue.json文件中的代码替换为下面的代码

复制代码
{
	"vue": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div>",
			"    ",
			"  </div>",
			"</template>",
			"<script>",
			"export default {",
			"  name:'HelloWorld',",
			"  data () {",
			"    return {",
			"    }",
			"  },",
			"  methods: {",
			"     ",
			"  },",
			"  components: {",
			"     ",
			"  }",
			"}",
			"</script>",
			"<style scoped>",
			"   ",
			"</style>",
		],
		"description": "快速创建vue2模板"
	},
	"vue3": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"",
			"</template>",
			"<script setup lang=\"ts\">",
			"import {ref,reactive} from \"vue\"",
			"",
			"</script>",
			"<style lang=\"scss\" scoped>",
			"",
			"</style>",
		],
		"description": "快速创建vue3模板"
	}
}
相关推荐
敲代码的彭于晏几秒前
Claude Code Token 烧得太快?这8个方案帮你立省90%!
前端·ai编程·claude
可视之道3 分钟前
设备拓扑图中的实时状态映射与动画策略:告警闪烁、流向动画、质量码怎么共存
前端
涂兵兵_青石疏影4 分钟前
绘制图像-clip方法
前端
玄月三初21 分钟前
使用pandoc把word转换成markdown格式
vscode·word·markdown
焦糖玛奇朵婷22 分钟前
解锁扭蛋机小程序的五大优势
java·大数据·服务器·前端·小程序
SwJieJie32 分钟前
windsurf的配置和项目规则、工作流、agent技巧使用
前端
白日梦想家68141 分钟前
从基础入手,分清一次性定时器与永久定时器
前端
AIwork4me1 小时前
别再把 RAG 当知识库:用 AutoClaw 搭一套会进化的 Karpathy LLM Wiki
前端
彩票管理中心秘书长1 小时前
Git 归档与补丁命令大全(完整详解版)
前端
RePeaT1 小时前
【Nginx】前端项目部署与反向代理实战指南
前端·nginx