Vue + Typescript - ошибки импорта с помощью декораторов на основе классов

Я пытаюсь настроить Vue 3 с помощью TypeScript и компонентов на основе классов. Однако я продолжаю получать ошибку при импорте декоратора Component в конструктор Vue:

This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'
has no call signatures. Vetur(2349)

mycode.vue:

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component // 1st Error '@Component'
export default class ProdItem extends Vue { // 2nd error 'Vue'
  
}
</script>

typescript javascript vue.js vuejs3
person thelandog    schedule 08.10.2020    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Возможно, вы пытаетесь использовать пример из официальных vue-class-component документов, но в настоящее время это для версии 7x, которую можно использовать только с Vue 2.

Vue 3 требует vue-class-component 8x, который еще не задокументирован, но вы можете обратиться к vue-class-component Issue № 406 который описывает изменения. Уведомления, относящиеся к вашему вопросу:

  • @Component будет переименован в @Options.
  • @Options является необязательным, если вы не объявляете с ним никаких параметров.
  • Конструктор Vue предоставляется из пакета vue-class-component.

Поскольку у вашего компонента нет параметров, вы можете просто опустить декоратор @Options в своем компоненте:

// BEFORE:
import Component from 'vue-class-component'
@Component
class {}

// AFTER:
/* no options used, so no @Options decorator needed */
class {}

Кроме того, Vue 3 больше не экспортирует конструктор Vue, но vue-class-component делает это, поэтому вашему компоненту придется его расширить:

// BEFORE:
import Vue from 'vue'

// AFTER:
import { Vue } from 'vue-class-component'

Для справки вы можете использовать Vue CLI для создания проекта Vue 3 + TypeScript. чтобы поиграть с рабочим примером, в котором используется последняя версия vue-class-component, как описано выше.

person tony19    schedule 10.10.2020

arrow_upward
1
arrow_downward

На основе этой проблемы и этого one, вы можете сделать:

<script lang="ts">

import {vue} from 'vue-class-component'


export default class ProdItem extends Vue { 
  
}
</script>
person Boussadjra Brahim    schedule 08.10.2020

arrow_upward
0
arrow_downward

С декоратором вам не понадобится ({}). Пытаться

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component  // 1st Error '@Component'
export default class ProdItem extends Vue { // 2nd error 'Vue'
  
}
</script>
person Anhdevit    schedule 08.10.2020
comment
Извините, я оставил это случайно. Я только что отредактировал пост. Извинения - person thelandog; 08.10.2020