Vue3.0 vscode编辑器代码块配置

以下代码复制粘贴到代码块内即可

启动命令vue3

{
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"<div class='$2'>$5</div>",
			"</template>",
			"",
			"<script>",
			"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
			"//例如：import 《组件名称》 from '《组件路径》';",
			"import {",
			"  defineComponent,",
			"  reactive, //返回对象的响应式副本",
			"  ref, //定义一个数据的响应式",
			"  onBeforeMount,",
			"  onMounted,",
			"  onBeforeUpdate,",
			"  onUpdated,",
			"  onBeforeDestroy,",
			"  onUnmounted,",
			"  activated,",
			"  onErrorCaptured,",
			"} from 'vue';",
			"export default defineComponent({",
			"  //import引入的组件需要注入到对象中才能使用",
			"  components: {},",
			"  //setup替代beforeCreate生命周期 - 创建之前和created创建完成（可以访问当前this实例）",
			"  // note: setup 须用箭头函数",
			"  setup(props, context) {",
			"    // props 获取组建中定义的props",
			"    // Context 暴露组件的property{ attrs, slots, emit }",
			"    const data = reactive({ value: 0 });",
			"    const data2 = ref(0);",
			"    console.log(data2.value);",
			"    //监控数据变化",
			"    watch(data, () => {",
			"      if (data.value) {",
			"        // 输出",
			"        data.value++;",
			"      }",
			"    });",
			"    //生命周期 - 挂载之前",
			"    onBeforeMount(() => {});",
			"    //生命周期 - 挂载完成（可以访问DOM元素）",
			"    onMounted(() => {});",
			"    //生命周期 - 更新之前",
			"    onBeforeUpdate(() => {});",
			"    //生命周期 - 更新之后",
			"    onUpdated(() => {});",
			"    //生命周期 - 销毁之前",
			"    onBeforeDestroy(() => {});",
			"    //生命周期 - 销毁完成",
			"    onUnmounted(() => {});",
			"    //如果页面有keep-alive缓存功能，这个函数会触发",
			"    activated(() => {});",
			"    //错误处理",
			"    onErrorCaptured(() => {});",
			"    return { data, data2 };",
			"  },",
			"  //监听属性 类似于data概念",
			"  computed: {},",
			"});",
			"// function 可以写在外面在setup内部调用方法",
			"</script>",
			"<style lang='less' scoped>",
			"//@import url($3); 引入公共css类",
			"$4",
			"</style>"
		],
		"description": "Log output to console"
	}
}