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>

和components文件夹还包含index.js，因此我可以将其导出并导入renderingProject中

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

我的renderingProject具有以下组件，该组件试图在一个陈述中从componentProject导入所有组件

<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>

及其工作！ ;）

一行导入多个组件（VueJs）

1 个答案: