关于import自定义组件无法resolve的问题

来源:3-1 vue3 新特性巡礼

LayLowMay

2022-01-28

老师您好,在听完您的课程后,决定根据自身所学整理出一个开源项目。但目前在整理项目结构的时候遇到以下问题。

首先这是我一个页面的引入组件示意图

http://img.mukewang.com/szimg/61f34b7509b442ee08440724.jpg


然后我将Pagination和Table还有ListTable.vue都整合到一个index.ts文件中

import ListTable from './ListTable.vue'
export { default as Table } from './Table.vue'
export { default as Pagination } from './Pagination.vue'

export default ListTable

ListTable组件引入了Table和Pagination组件

import { Table, Pagination } from '@/components/Table/ListTable'

export default defineComponent({
    name: 'list-table',
    components: {
        Table,
        Pagination
    },
    setup(props) {
        return {}
    }
})

然后ListTable组件的模板部分使用了Table和Pagination

<template>
    <div ref="ListTable" class="list-table-container">
        <div class="table-container">
            <Table
                :rows="rows"
                :sort="sort"
                v-bind="props"
                @table-selection-change="handleTableSelectionChange"
                @sort-change="handleSortChange"
            />
        </div>
        <div v-if="pageSetting.pageable" class="pagination">
            <Pagination
                :current-page="currentPage"
                :page-size="pageSetting.pageSize"
                :total-count="rowCount"
                @change="handlePageChange"
             />
        </div>
    </div>
</template>

然后另一个ts文件也整合导出了ListTable组件

export { default as ListTable } from './ListTable'
export { default as Button } from './Button/Button.vue'

最后view.vue文件使用ListTable组件

<template>
    <ListTable
        ref="table"
        url="/authorize/user/getUsers"
        :columns="columns"
    >
        <template #top-bar>
            <Button :button="makeBtn('add')" @click="handleAdd"/>
            <Button
                :button="makeBtn('delete')"
                :disabled="selection?.length === 0"
                @click="handleDel"
            />
        </template>
    </ListTable>
</template>
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, onMounted, ref } from 'vue'

import { Button, ListTable, makeBtn, makeBtnSet } from '@/components/Table'

export default defineComponent({
components: {
    ListTable,
    Button
},
setup() {
    return {}
}
</script>

结果页面的ListTable内容没有显示

http://img.mukewang.com/szimg/61f3532a09c2c71e00000000.jpg

是否是因为ListTable组件本身就被那个index.ts导出,它自己又引入了Table和Pagination,造成循环引用导致不能resolve组件呢

因为button组件倒是引入进来了

http://img.mukewang.com/szimg/61f35cd2090d2a7b19220880.jpg

并且当ListTable引入Table和Pagination的方式变成以下方式后,Table和Pagination又能显示。因此我确认了多次export ListTable对于ListTable的显示没有影响。

import Table from './Table.vue'
import Pagination from './Pagination.vue'

export default defineComponent({
    name: 'list-table',
    components: {
        Table,
        Pagination
    },
    setup(props) {
        return {}
    }
})

http://img.mukewang.com/szimg/61f35f5a09ab6f6c15021104.jpg

恳求老师帮忙查看一下,学生水平有限解决不了,又妄想将组件整合导出

写回答

3回答

LayLowMay

提问者

2022-02-01

// ListTable/index.ts
export { default as Table } from './Table.vue'
export { default as Card } from './Card.vue'
export { default as Pagination } from './Pagination.vue'

export { default } from './ListTable.vue'

这样可以展示,并且可以整理好项目层级架构,非常感谢老师

0
1
张轩
恭喜 期待你的框架能早点做出来
2022-02-03
共1条回复

张轩

2022-01-31

同学你好 经查发现和你的猜想的原因是一样的

你在 ListTable /index.ts 中 导出了 ListTable 组件,以及中继导出了和他相关的 Table 以及 Card 组件。

然后在 ListTable.vue 中,又导入了 Table 以及 Card 以及其他组件。

这样就造成组件不能 resolve。

我发现将

// Table/index.ts
export { default as ListTable } from './ListTable'
这一行,改成
export { default as ListTable } from './ListTable/ListTable.vue'

就可以成功运行了

0
1
LayLowMay
老师,我瞎试试出来了!!但我自己没法采纳自己,谢谢老师,我的框架可以继续往前推了!!!!!
2022-01-31
共1条回复

张轩

2022-01-29

同学你好 请问能否将代码库提供给我一下,我帮你在本地调试一下,看样子是导入的时候有问题,出错提示是没法 resolve Table 和 Pagnation 组件。

0
1
LayLowMay
老师,第一次操作git不熟悉,地址在这里https://github.com/brave9uy/dsn-ui。访问url是:http://localhost:8089/authorize/user
2022-01-29
共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程