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模板"
	}
}
相关推荐
谢尔登3 分钟前
为什么React 17开始无需在组件中引入React了?
前端·react.js·前端框架
ohyeah4 分钟前
JavaScript 面向对象的本质:从对象模板到组合继承的完整演进
前端·javascript
Drift_Dream10 分钟前
虚拟滚动:优化长列表性能的利器
前端
逃离疯人院10 分钟前
前端性能深度解析:网络响应时间与实际渲染时间的鸿沟
前端
BD_Marathon15 分钟前
【JavaWeb】VsCode的其他常见设置
ide·vscode·编辑器
VX:Fegn089520 分钟前
计算机毕业设计|基于springboot + vue酒店预约系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
我是若尘20 分钟前
🚀 深入理解 Claude Code:从入门到精通的能力全景图
前端
老前端的功夫28 分钟前
Webpack 深度解析:从配置哲学到编译原理
前端·webpack·前端框架·node.js
重铸码农荣光32 分钟前
🌟 Vibe Coding 时代:用自然语言打造你的专属 AI 单词应用
前端·vibecoding
MegatronKing33 分钟前
SSL密钥协商导致抓包失败的原因分析
前端·https·测试