使用 vuejs 实现不同的移动和桌面布局答案

【问题标题】：Different mobile and desktop layout with vuejs使用 vuejs 实现不同的移动和桌面布局
【发布时间】：2018-05-02 14:05:36
【问题描述】：

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

我的网络应用程序包含很多表格，众所周知，在移动设备中使用表格并不是最好的体验（即使有很多方法可以使表格可用但不愉快）

所以我想制作 vue js 来检测用户是否从桌面或移动设备访问 Web 应用程序。当用户在桌面上打开时，它会显示一个很好的旧表，因为屏幕房地产桌面用户有。但是当用户在移动设备中打开时，它会显示更适合移动设备的卡片或面板视图（一般为纵向）

我知道有一个具有出色引导框架的解决方案可以做到这一点，但它不是交换而是渲染所有部分（大部分是 html）并根据屏幕大小隐藏每个部分。

但也许有一种更高效、更智能的方式在 vue js 中实现这些功能？

【问题讨论】：

我想说让你的 css 处理它呈现给最终用户的方式，而不是 UI 渲染器，在这种情况下是 VUE。
让你的 css 处理如何隐藏/显示（即通过media）是最好的方法，除非你想编写一个移动特定的网站，你通常会看到并与m. 在一起
要么适当地设置表格的样式（你可以更改行的display，也许让它们看起来像卡片），或者只是在你的应用程序中使用可重用的组件，这些组件可以基于特定的内容提供服务在移动域上（如果那是您正在使用的）。但是，CSS 绝对是处理这个问题的最佳方式。
看我的回答stackoverflow.com/a/50342804/6013170

标签： javascript css vue.js vuejs2 vue-component

【解决方案1】：

我会说您应该考虑 css 来处理布局差异，但我对此的看法是，用户与内容/应用程序/等交互的方式在移动设备和 PC 之间可能存在显着差异/laptop，不仅仅是以不同的方式调整和放置 div。如果您要根据设备提供足够不同的体验，那么处理 js 中的差异可能会更适合您。

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

【讨论】：

【解决方案2】：

如果您有 2 个不同的 vue 文件，一个用于移动设备，另一个用于桌面设备，您可以按照此答案中的说明进行操作：

https://stackoverflow.com/a/51053611/1178478

【讨论】：