Question

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

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<html>
<body>
<div class="container" id="maincontainer">
      <div class="row" id="headerrow">
        <div class="col-xs-4">Col 1</div>
        <div class="col-xs-4">Col 2</div>
        <div class="col-xs-4">Col 3</div>
      </div>
      <div class="row" id="listrow">
        <div class="container" id="innercontainer">
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
        </div>
      </div>    
    
    </div>
    </body>
    </html>

在那之后，我只想在我的App.vue中导入Card，而index.js应该决定所需的组件（Card.vue或Card.mobile.vue）

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

有可能吗？

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

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

1 个答案: