VSCode生成vue模板

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>