一个vscode中的vue3模板代码片段。

供新手参考。

{
  "vue3": {
    "prefix": "vue3-ts",
   "body": [
      "<template>",
      "<div class=\"$1\">$3</div>",
      "</template>",
      "",
      "<script lang=\"ts\">",
	  "import { ",
      "  defineComponent, ",
      "  getCurrentInstance, ",
      "  reactive, ",
      "  ref ",
      "} from 'vue';",
      "",
      "",
      "",
      "export default defineComponent({",
      "  name: '$2',",
      "  // 注册你的组件",
      "  components:{  },",
      "  props: {",
      "    text: {",
      "      type:String,",
      "      default: ''",
      "    },",
      "    is_right: Boolean,",
      "    obj: {",
      "      type: Object,",
      "      default: ()=>{ return {xx:''} }",
      "    }",
      "",
      "  },",
      "  setup(props, {attrs, slots, emit, expose }){",
      "    const { proxy } = (getCurrentInstance() as any);    // 全局变量代理，用于使用 app.config.globalProperties.xxx 挂载的参数",
      "    let xxx = (props as any).xxx;                       // 获取某个被代理的父组件数据",
      "",
      "    return {",
      "      proxy,",
      "      attrs,    // Attribute (非响应式对象，等同于 $attrs)，有状态，会随组件本身的更新而更新",
      "      slots,    // 插槽 (非响应式对象，等同于 $slots)，有状态，会随组件本身的更新而更新",
      "      emit,     // 触发事件 (方法，等同于 $emit)",
      "      expose,   // 暴露公共 property (函数)",
      "    }",
      "  },",
      "  ",
      "",
      "  methods:{",
      "  ",
      "  }",
      "});",
      "</script>",
      "",
      "<style lang=\"scss\" scoped>",
      "// @import \"xxx\";",
      "// @import url(xxx);",
      ".xxx$4{",
      "",
      "}",
      "</style>",
    ],
    "description": "Generate a component template of the vue3+typescript project."
  }
}