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模板"
	}
}
相关推荐
洛阳纸贵6 分钟前
JAVA高级工程师--Maven父子关系专题
java·前端·maven
imkaifan9 分钟前
10、vue3中针对图片的处理
前端·javascript·vue.js
柯南二号10 分钟前
【大前端】【iOS】iOS 使用 Objective-C 绘制几大常见布局(UIKit / Core Graphics 实战)
前端·ios
invicinble19 分钟前
对于使用html去进行前端开发的全面认识,以及过度到vue开发
前端·javascript·vue.js
我这一生如履薄冰~20 分钟前
element-plus去除el-dropdown组件当鼠标移入文本时会出现边框
前端·elementui·vue
计算机毕设VX:Fegn089522 分钟前
计算机毕业设计|基于springboot + vue校园招聘系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
惆怅客12324 分钟前
在 vscode 中断点调试 ROS2 C++ 的办法
c++·vscode·调试·ros 2
小果子^_^25 分钟前
div或按钮鼠标经过或鼠标点击后效果样式
前端·css·计算机外设
han_26 分钟前
前端性能优化之性能瓶颈点,Web 页面加载全流程解析
前端·javascript·性能优化
禅思院26 分钟前
Vite 开发环境下实现 YAML 配置热更新方案
前端·vue.js·前端框架