Блог

Я попытался создать свою собственную библиотеку компонентов, реализующую Vuetify, с помощью vue-cli vue create d-components . Мои компоненты регистрируются с помощью install функции, экспортируемой в основной файл.ts моей библиотеки, такой как:

 import Vue, { VueConstructor } from 'vue';
import Vuetify from 'vuetify';
import DBtn from "./components/DBtn.vue";

Vue.use(Vuetify)

export default {
  install(vue: VueConstructor): void {
    vue.component("d-btn", DBtn);
    ...
  }
}
 

И компонент определяется как:

 <template>
  <v-btn v-bind="$attrs" v-on="$listeners" elevation="0" small>
    ...
  </v-btn>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({})
export default class DBtn extends Vue {}
</script>
 

Я добавил эту библиотеку в качестве подмодуля git в свой основной Vue.js приложение (которое также использует Vuetify), запустилось npm install и npm link в корневой папке подмодуля, затем запустилось npm link d-components в моей основной папке приложения.

Мое приложение импортирует и вызывает функцию установки моей библиотеки с помощью:

 import Vue from 'vue';
import DComponents from "d-components" // library's name

Vue.use(DComponents);
 

Пока все кажется в порядке.

Но когда я пытаюсь использовать компоненты своей библиотеки, я получаю кучу ошибок:

[Vue warn]: $attrs is readonly.

[Vue warn]: $listeners is readonly.

Похоже, что это связано с тем фактом, что в моем приложении созданы два экземпляра Vue, я искал, были ли все мои импортные файлы Vue одинаковыми, и я могу найти их только import Vue from 'vue' в моем основном приложении и в моей библиотеке.

Кто-нибудь знает, как проверить, создаю ли я несколько экземпляров Vue ?

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

Причина в том, что ваша ссылка npm выполнена в подмодуле, который устанавливает пакет подмодулей глобально и все его зависимости, включая Vue. Вы можете проверить каталог node_modules вашего глобально установленного подмодуля, вы должны увидеть там Vue.

Таким образом, у вас есть первый Vue в node_modules вашего проекта и второй Vue в node_modules вашего компонента (глобально установленного).

Решение состоит в том, чтобы использовать ссылку npm ../component (не устанавливая npm в директории компонентов) из каталога вашего проекта, либо опубликуйте npm для компонента и установите его как обычную зависимость для вашего проекта. Это не приведет к установке Vue в каталог node_modules вашего компонента.

 $vuetify required package vuetify