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 分钟前
基于Django的医疗电子仪器系统
前端·数据库·1024程序员节
摘星编程8 分钟前
深入 Actix-web 源码:解密 Rust Web 框架的高性能内核
开发语言·前端·rust·actixweb
小白的码BUG之路8 分钟前
Vue3 -- 响应式 ref和 reactive
前端·javascript·vue.js
Onion15 分钟前
Vue2日历组件-仿企微日程日历
前端·javascript·vue.js
用户842981424181016 分钟前
js中如何隐藏eval关键字?
前端·javascript·后端
chxii18 分钟前
前端与Node.js
前端·node.js
zmirror20 分钟前
React-Router v6 useNavigate 非组件不生效
前端
红树林0739 分钟前
BeautifulSoup 的页面中需要获取某个元素的 xpath 路径
前端·python·网络爬虫·beautifulsoup
三小河1 小时前
教你发布一个npm的组织包
前端
青椒a1 小时前
002.nestjs后台管理项目-数据库之prisma(上)
前端