javascript - 如何将文件夹导入为Vue组件

Question

我想为移动设备显示不同的 Vue 组件。我通过 mixin 找到了这个解决方案 ( https://stackoverflow.com/a/48515205/11079653 )。

并且，例如，我有组件 - Card.vue。但是对于移动设备，我创建了 CardMovile.Vue。

现在我想将这些组件放在包含 index.js 的文件夹 Card 中

-Card
--Card.vue
--CardMobile.vue
--index.js

之后，我只想在我的 App.vue 中导入 Card，index.js 应该决定需要什么组件(Card.vue 或 Card.mobile.vue)

<template>
  <Card></Card>
</template>

<script>
import Card from './Card'
</script>

这可能吗？

Answer 1

您可以尝试在Card/index.js 文件中写入以下内容:

import isMobile from 'is-mobile'

import Card from './Card.vue'
import CardMobile from './CardMobile.vue'

export default isMobile() ? CardMobile : Card