使用Vuejs实现移动端和桌面端不同的布局

Question

我正在寻找一种轻量级且智能的方式，使用Vue为用户提供不同的移动和桌面视图布局或组件。

我的Web应用程序包含许多表格，正如大家所知，在移动设备上使用表格并不是最佳体验（即使有很多方法可以使表格可用但并不令人愉悦）。

因此，我想让Vue.js检测用户是从桌面还是移动设备访问Web应用程序。当用户在桌面上打开时，它将显示一个传统的好表格，因为桌面用户拥有屏幕实际空间。但当用户在移动设备上打开时，它将显示卡片或面板式视图，这更适合移动设备（通常是纵向方向）。

我知道有一个带有伟大Bootstrap框架的解决方案可以做到这一点，但它不是交换而是渲染所有部分（大多数情况下是HTML），并根据屏幕大小隐藏每个部分。

但也许在Vue.js中实现这些功能有更高效和更智能的方法？

- PamanBeruang

---

我会建议让你的 CSS 处理最终用户的呈现方式，而不是 UI 渲染器（在这种情况下是 Vue）来处理。 - WilomGfx

让你的CSS处理如何隐藏/显示（即通过“媒体”）是最好的方法，除非你想编写一个专门针对移动设备的网站，通常以“m.”开头。 - A. L

要么适当地为表格设置样式（您可以更改行的display属性，例如使它们看起来像卡片），要么只需在应用程序中使用可重复使用的组件，这些组件可以根据移动领域提供特定内容（如果您正在使用移动设备）。但是，CSS绝对是处理此类问题的最佳方式。 - Mike Rockétt

请查看我的回答 https://dev59.com/BlYM5IYBdhLWcg3wrRqC#50342804 - Janserik

Answer 1

如果你有两个不同的Vue文件，一个是移动端的，另一个是桌面端的，你可以像这个答案所解释的那样操作：https://dev59.com/BlYM5IYBdhLWcg3wrRqC#51053611。

- Derzu

Answer 2

我认为你应该考虑使用CSS来处理布局差异，但是我的观点是用户与移动设备和PC /笔记本电脑交互的方式可能会有很大的不同，不仅仅是大小和位置不同。如果您基于设备提供了足够不同的体验，则在js中处理差异可能更适合您。

您可以使用类似http://detectmobilebrowsers.com/的库来确定用户是否正在使用移动设备。然后将该值（isMobile）存储在全局可访问的变量中，使用vuex、bus或mixin。这将允许您创建移动版本的组件，您可以对其进行代码拆分，并拥有单独的CSS文件。我认为这将使应用程序更易于长期维护（在我看来，但这取决于一些因素）。

- Daniel