用一行导入多个组件(VueJs)

Question

我有两个项目。一个用于创建、编写组件，另一个项目用于呈现组件。

到目前为止，我已经在componentsProject上创建了npm链接，并在renderingProject中喜欢它们。

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，因此我可以导出它们并在renderingProject中导入它们。

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

我的renderingProject有以下组件，它试图在一个状态中从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({

请你帮我解决这个问题，如何修复我的错误，这样我就可以用一个import语句导入x个组件。如果您需要更多的信息，请告诉我，我会提供。谢谢!

Answer 1

所以我找到了解决问题的办法。我更改了index.js => index.ts代码，但是看起来还是一样的

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

export default {
    Clock,
    TextInput,
};

我必须在我的PhpStorm (设置、=>语言和框架、=> TypeScript )中更改设置。检查“更改”复选框上的重新编译)

我在renderProject上做了一些小的代码修改，所以我的import语句现在看起来如下

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

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

以及它的工作！)