Сделать пакет доступным в Vue с Typescript

Question

Я использовал vue -cli для создания проекта Vue с машинописью. Теперь мое приложение. vue выглядит примерно так:

...
Component({
    components: {NavigationDrawer, AppBar}
})
export default class App extends Vue {...}

Я хочу добавить пакет v-hotkey в мое приложение. Инструкции говорят использовать это:

import Vue from 'vue'
import VueHotkey from 'v-hotkey'

Vue.use(VueHotkey)

Но когда я делаю это

<template>
    <div v-hotkey="keymap"></div>
</template>

...
import VueHotkey from 'v-hotkey';

Vue.use(VueHotkey);

@Component({
    components: {NavigationDrawer, AppBar}
})
export default class App extends Vue {
    ...
    get keymap() {
        return {
            // 'esc+ctrl' is OK.
            'ctrl+space': this.toggleSearch()
        }
    }
    ...
}

, я получаю эту ошибку:

[Vue warn]: Failed to resolve directive: hotkey

(found in <App> at src/App.vue)

Я думаю, что я включаю пакет в неправильном пути. Но vue с машинописью кажется новым, и я не смог найти ничего, что могло бы мне помочь. Я также посмотрел здесь но это не помогло.

Answer 1

Локальный импорт:

Внутри компонента мы обычно не используем Vue .use (); если вы хотите использовать v-hotkey внутри определенного компонента, тогда мы импортируем его только в этот компонент, после чего мы можем использовать его там. (локальный импорт)

<template>
<div vue-hotkey ="keymap"></div>
</template>

...
import VueHotkey from 'v-hotkey';

Глобальный импорт:

, если вы хотите использовать его в любом месте приложения, мы должны импортировать его в таком месте, как main .ts или создайте отдельный файл с необходимым кодом и передайте его как параметр конструктора экземпляра vue (например, router) и используйте его как глобальный. Чтобы сделать его доступным для любого места в приложении, можно использовать "Vue .use ();"

import VueHotkey from 'v-hotkey'

Vue.use(VueHotkey)