Question

嘿，我正在努力做到以下几点：我正在研究Vue.js，每次你需要一个组件，你需要导入它们才能使用它们。所以我想用这样的组件的每个路径制作模块：

export default {
  bar: '@/components/chart/bar.vue',
  dashboard: '@/components/chart/dashboard.vue',
  gantt: '@/components/chart/gantt.vue',
  // ... other path
}

在某些文件中使用这样的模块。例如：

<template>
  <!-- ... some code -->
</template>

<script>
import path from '@/theGoodPath'
import bar from path.bar

// ... some code
</script>

但它似乎不起作用，我认为这是一种耻辱，因为这样，我们可以更方便地管理组件的路径，如果需要，我们只需要在1个文件上进行更改。

您怎么看？

编辑：我尝试使用重新导出，当我从以下地址更改时它也不起作用：

<script>
import bar from '@/components/chart/bar'
import gantt from '@/components/chart/gantt'
import dashboard from '@/components/chart/dashboard'
import menuNav from '@/components/mini components/menuNav'

// some code
</script>

到此：

<script>
import { bar, gantt, dashboard, menuNav } from '@/path.js'

// some code
</script>

它在第二种情况下不起作用。由于path.js包含：

export { default as bar } from '@/components/chart/bar'
export { default as dashboard } from '@/components/chart/dashboard'
export { default as gantt } from '@/components/chart/gantt'
export { default as menuNav } from '@/components/mini components/menuNav'

Answer 1

您可以使用再出口。

# file: @/theGoodPath
export { default as bar } from '@/components/chart/bar.vue'
export { default as dashboard } from '@/components/chart/dashboard.vue'
export { default as gantt } from '@/components/chart/gantt.vue'

比用法看起来像这样：

<template>
  <!-- ... some code -->
</template>

<script>
import { bar } from '@/theGoodPath'

// ... some code, use `bar` here
</script>

了解有关此处重新导出的详情 - http://jamesknelson.com/re-exporting-es6-modules/

检查 live demo here

改进进口......来自

1 个答案: