vscode 设置vue 代码块

{
	"Print to console": {
			"prefix": "vue",
			"body": [
					"<template>",
					"  <div class='$2'>$5</div>",
					"</template>",
					"",
					"<script>",
					"",
					"  export default {",
					"    // import引入的组件需要注入到对象中才能使用",
					"    components: {},",
					"    data () {",
					"      // 这里存放数据",
					"      return {}",
					"    },",
					"    // 监听属性 类似于data概念",
					"    computed: {},",
					"    // 监控data中的数据变化",
					"    watch: {},",
					"    // 方法集合",
					"    methods: {},",
					"    // 生命周期 - 创建完成（可以访问当前this实例）",
					"    created () {},",
					"    // 生命周期 - 挂载完成（可以访问DOM元素）",
					"    mounted () {},",
					"    // 这里存放数据",
					"    beforeCreate () {},",
					"    // 生命周期 - 挂载之前 ",
					"    beforeMount () {},", 
					"    // 生命周期 - 更新之前 ",
					"    beforeUpdate() {},",
					"    // 生命周期 - 更新之后 ",
					"    updated () {},",
					"    // 生命周期 - 销毁之前 ",
					"    beforeDestroy() {},",
					"    // 生命周期 - 销毁完成 ",
					"    destroyed () {},",
					"    // 如果页面有keep-alive缓存功能，这个函数会触发",
					"    activated () {}" ,
					"  }",
					"</script>",
					"<style lang='scss' scoped>",
					"  // @import url($3); 引入公共css类",
					"</style>"
			],
			"description": "Log output to console"
	}
}

1. vscode 打卡以下画面（中文叫用户代码片段）

2、选择你需要将此代码块作用在哪种类型的文件

3、配置一个json（就是上面那段json代码）

4、重启（其实不是必要的）

5、使用敲vue就可以出现一个vue的代码块了

6、备注如果自己有封装比较好的代码，也可以这么做