代码之家  ›  专栏  ›  技术社区  ›  Valor_ user3379466

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

  •  0
  • Valor_ user3379466  · 技术社区  · 6 年前

    到目前为止,我已经在ComponentProject上创建了npm链接,并且喜欢在renderingProject中使用它们

    组件项目

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

    <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 回复  |  直到 6 年前
        1
  •  2
  •   Valor_ user3379466    6 年前

    所以我找到了解决问题的办法。 我更改了index.js=>索引 代码看起来仍然一样

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

    我必须更改PhpStorm中的设置(设置=>语文及;框架=>打字稿。选中更改时重新编译复选框)

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

    而且它还能工作!;)