VSCode生成vue模板

最新推荐文章于 2025-02-19 10:54:51 发布

林木森森一飞冲天

最新推荐文章于 2025-02-19 10:54:51 发布

阅读量486

点赞数

分类专栏： # vue 代码工具

本文链接：https://blog.youkuaiyun.com/l229568441/article/details/106845819

版权

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

代码工具

2 篇文章

订阅专栏

本文介绍了如何在VSCode中设置和使用用户片段功能，以快速生成Vue模板，简化开发流程。通过‘文件’->‘首选项’->‘用户片段’选择vue.json，然后添加配置内容，即可在新建.vue文件时，通过输入vue并按Tab或Enter键自动生成模板，光标自动定位到name处，便于填写组件名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VSCode生成vue模板

使用VSCode开发vue时，可以利用【用户片段】功能快速生成vue模板，减少重复代码开发

如何设置

1.点击左上角【文件】——【首选项】——【用户片段】
在这里插入图片描述

2.在输入框中输入vue，选中下拉列表中的vue.json
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olNyRykR-1592495109847)(E:\Program Files\Typora\files\picture\juejin\vue\image-20200618233812281.png)]

3.在vue.json中输入以下内容

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!-- $0 -->",
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '$1',",
			"  data () {",
			"    return {",
			"    }",
			"  },",
			"",
			"  components: {},",
			"",
			"  computed: {},",
			"",
			"  methods: {}",
			"}",
			"",
			"</script>",
			"<style lang='scss' scoped>",
			"</style>",
			""
		],
		"description": "Log output to console"
	}
}

如何使用

新建.vue文件，在文件中输入vue，然后按tab或者enter即可。*

PS:光标会停在name那里，方便输入组件名

示例

<!--  -->
<template>
  <div></div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
    }
  },

  components: {},

  computed: {},

  methods: {}
}

</script>
<style lang='scss' scoped>
</style>