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

Пока что я создал ссылку npm на componentsProject, и они мне понравились в RenderProject.

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, поэтому я мог бы экспортировать их и импортировать в RenderProject

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

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

<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 количество компонентов с помощью одного оператора импорта. Если вам нужна дополнительная информация, дайте мне знать, и я предоставлю. Спасибо!

1
Valor_ 14 Ноя 2018 в 17:42

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>

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

2
Valor_ 29 Янв 2019 в 18:00