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

Question

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

我的 Web 应用程序由很多表格组成，众所周知，在移动设备中使用表格并不是最佳体验（甚至认为有很多方法可以使表格可用但不愉快）

所以我想让 vue js 来检测用户是从桌面还是移动设备访问 web 应用程序。当用户在桌面中打开时，由于桌面用户拥有的屏幕空间，它会显示一个很好的旧表。但是当用户在移动设备中打开时，它会显示更适合移动设备的卡片或面板之类的视图（一般为纵向）

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

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

Answer 1

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

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