【Vue3】vue3+TS 組件導出

vue3+TS 組件導出

• vue3.0+

• TypeScript

  1. vue2.0中常用方法，不推薦
  2. 配合shims-vue.d.ts進行組件定義和注冊
     【注意】:導入組件時需加上‘.vue’后綴
     import LaMenu from "@/components/Menu.vue";
  3. 目前vue-class-component不支持vue3.0組合API寫法，不建議使用

  // vue3.0+TypeScript使用時的一些小坑
  // 【三種定義方式在Vue3.*+Ts】
  
  /*******************************************************************/
  // 【1.直接導出】
  export default{
  	name: 'myComponent'
  }
  /*******************************************************************/
  
  
  /*******************************************************************/
  // 【2.使用defineComponent導出】
  import {defineComponent} from 'vue'
  export default defineComponent({
  	name: 'myComponent'
  })
  /*******************************************************************/
  
  /*******************************************************************/
  // 【3.使用vue-class-component】
  import Vue from 'vue'
  import Options from 'vue-class-component'
  
  // Define the component in class-style
  // 最新版Component注解已經改為Options
  @Options({
    computed: mapGetters([
      'posts'
    ]),
  
    methods: mapActions([
      'fetchPosts'
    ])
  })
  export default class Counter extends Vue {
  	property: number;
  	method(){}
  }
  /*******************************************************************/