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模板"
	}
}
相关推荐
高山我梦口香糖9 分钟前
[react] 优雅解决typescript动态获取redux仓库的类型问题
前端·react.js·typescript
Serendipity26115 分钟前
JavaScript类型
前端·javascript
万维——组态17 分钟前
web组态可视化编辑器
前端·物联网·低代码·编辑器·流程图·组态
飞舞花下20 分钟前
vue el-dialog实现可拖拉
前端·javascript·vue.js
决斗小饼干28 分钟前
大文件传输与断点续传实现(极简Demo:React+Node.js)
前端
铅华尽28 分钟前
前端JavaScript(六)---JS中的事件
开发语言·前端·javascript
肉肉心很软33 分钟前
本地项目显示正常,打包部署后ElementUI重点饿图标全部显示异常为小方框
前端·elementui
那你能帮帮我吗35 分钟前
element-ui的el-color-picker颜色选择器组件,弹窗定位在左上角的问题排查和解决
前端·element
明月看潮生1 小时前
青少年编程与数学 02-004 Go语言Web编程 02课题、依赖管理
开发语言·前端·青少年编程·编程与数学·goweb
minstbe1 小时前
WEB开发: Node.js路由之由浅入深(三)自动配置路由 - 全栈工程师入门
前端·node.js