vue代码片段

1.Vetur扩展插件

2.文件—首选项—用户片段—搜索“vue”

3.代码替换（可以依据个人情况修改代码模板）

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

4.新建.vue文件，输入vue，Enter或者Tab都可