Импорт нескольких компонентов одной строкой (VueJs)

Question

У меня есть два проекта. Один предназначен для создания, написания компонентов, а другой - для их рендеринга.

Пока что я создал ссылку npm на компонентыProject и понравился им в рендеринге Project

componentsProject Он имеет два простых компонента (Clock.vue и TextInput.vue)

Пример TextInput.vue

<template>
  <div>
    <textarea v-model="text"></textarea>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';

    export default Vue.extend({
        name: 'textInput',
        data() {
            return {
                text: '',
            };
        },
    });
</script>

и папка компонентов также содержит index.js, так что я могу экспортировать их и импортировать в рендерингПроект

import Clock from './Clock.vue'
import TextInput from './TextInput.vue'
export {
    Clock,
    TextInput
};

Мой рендерингПроекта имеет следующий компонент, который пытается импортировать все компоненты из компонентовПроекта в одном отчете

<template>
  <div class="home">
    <Clock></Clock>
    <TextInput></TextInput>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Components } from 'componentsProject/src/components/index.js';


export default Vue.extend({
  name: 'home',
  components: {
      Components,
  },
});
</script>

В настоящее время я получаю следующую ошибку.

"export 'Components' was not found in 'siriusComponents/src/components/index.js'

ERROR in renderProject/src/views/Home.vue
9:28 Could not find a declaration file for module 'componentsProject/src/components/index.js'. 'renderProject/node_modules/componentProject/src/components/index.js' implicitly has an 'any' type.
  Try `npm install @types/componetProject` if it exists or add a new declaration (.d.ts) file containing `declare module 'componentProject/src/components/index.js';`
     7 | <script lang="ts">
     8 | import Vue from 'vue';
  >  9 | import { Components } from 'componentProject/src/components/index.js';
       |                            ^
    10 | 
    11 | 
    12 | export default Vue.extend({

Не могли бы вы помочь мне, как исправить мою ошибку, чтобы я мог импортировать x количество компонентов с помощью одного оператора импорта. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать, и я предоставлю. Спасибо!

Answer 1

Итак, я нашел решение для моей проблемы. Я изменил index.js => index.ts Код по-прежнему выглядит так же

import Clock from './Clock.vue';
import TextInput from './TextInput.vue';

export default {
    Clock,
    TextInput,
};

Мне пришлось изменить настройки в моем PhpStorm (Настройки => Языки и рамки => TypeScript. Установите флажок Перекомпилировать при изменении)

И я сделал небольшое изменение кода в renderProject, поэтому мой оператор импорта теперь выглядит так

<script lang="ts">
import Vue from 'vue';
import Components from 'componentsProject/src/components/index';

export default Vue.extend({
  name: 'home',
  components: Components,    
});
</script>

И это работает! ;)