一行导入多个组件（VueJs）答案

【问题标题】：Import multiple component with one line (VueJs)一行导入多个组件（VueJs）
【发布时间】：2018-11-14 14:42:23
【问题描述】：

我有两个项目。一个用于创建、编写组件，另一个项目用于渲染它们。

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

组件项目它有两个简单的组件（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>

components 文件夹也包含 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({

你能帮我解决一下我的错误，这样我就可以用一个导入语句导入 x 个组件。如果您需要任何其他信息，请告诉我，我会提供。谢谢！

【问题讨论】：

当前错误与组件的导入无关，而是与未为导入的模块 componentProject 提供的类型定义有关。模块类型定义应声明或设置为 any（不推荐）。 More 在模块上。
你能给我一个例子，我的语法应该是什么样子（声明的版本），这样它才能工作

标签： javascript vue.js import vuejs2

【解决方案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>

它的工作原理！ ;)

【讨论】：