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模板"
	}
}
相关推荐
橘子编程2 分钟前
CSS 全栈指南:从基础到 2025 新特性
前端·css·chrome·tensorflow·less·css3·html5
不会写DN9 分钟前
从依赖到自主:手写一个 ICO 文件转换器
前端·javascript·typescript·node.js
夏暖冬凉14 分钟前
前端大文件上传
前端
Aliex_git14 分钟前
前端监控笔记(一)
前端·笔记·学习
Highcharts.js15 分钟前
Highcharts Grid Lite:企业免费表格数据的基本工具
前端·javascript·信息可视化·免费·highcharts·表格工具
老萬頭17 分钟前
【技术深水区】抖音 WEB 端逆向:从零到一拿下 a_bogus 参数
前端·爬虫·python
程序员小李白18 分钟前
Vue 组件通信 极简速记版
前端·javascript·vue.js
光影少年18 分钟前
跨域问题如何解决?
前端·nginx·前端框架
2501_9151063219 分钟前
不依赖 Mac 也能做 iOS 开发?跨设备开发流程
ide·vscode·macos·ios·个人开发·swift·敏捷流程
C澒20 分钟前
微前端容器标准化 —— 公共能力篇:通用监控能力
前端·架构