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模板"
	}
}
相关推荐
FinClip2 分钟前
京东外卖App独立上线,超级App如何集成海量小程序?
前端
一颗苹果OMG6 分钟前
随着AI的发展,测试跟prompt会不会成为每个程序员的必修课
前端·程序员·全栈
起这个名字8 分钟前
Webpack——插件实现的理解
前端·javascript·node.js
Mapmost14 分钟前
让 AI 真正看懂世界—构建具备空间理解力的智能体
前端
橙 子_30 分钟前
我本以为代码是逻辑,直到遇见了HTML的“形”与“意”【一】
前端·html
Kisang.36 分钟前
【HarmonyOS】ArkWeb——从入门到入土
前端·华为·typescript·harmonyos·鸿蒙
沉默璇年42 分钟前
tgz包批量下载脚本
前端
a***13141 小时前
python的sql解析库-sqlparse
android·前端·后端
0***R5151 小时前
前端构建工具缓存,node_modules
前端·缓存
坚持就完事了1 小时前
CSS-4:CSS的三大特性
前端·css