我正在寻找一种轻量级且智能的方式，使用vue为用户提供不同的布局或组件，用于移动和桌面视图。
我的网页应用程序包含很多表格，大家都知道在移动设备上使用时表格并不是最佳体验（甚至认为有很多方法可以使表格可用但不愉快）
所以我想让vue js检测用户是否从桌面或移动设备访问网络应用程序。当用户在桌面打开时，由于桌面用户拥有屏幕空间，它将显示一个好的旧桌子。但是当用户在移动设备中打开时，它将显示更适合移动设备的卡或面板视图（一般的纵向）
我知道有一个很好的引导框架的解决方案可以做到这一点，但它不是交换，而是渲染所有部分（大部分是html），只是根据屏幕大小隐藏每个部分。
但也许在vue js中实现这些功能的效率更高，更智能？
答案 0 :(得分：0)
我会说你应该考虑 css来处理布局差异，但我对此的看法是，用户与内容/ app /等交互的方式在移动设备和PC之间会有很大差异/笔记本电脑，不仅仅是调整大小和放置不同的div。如果您根据设备提供足够的体验，那么处理js中的差异可能会对您有所帮助。
您可以使用http://detectmobilebrowsers.com/等库来确定用户是否使用移动设备。然后使用vuex，bus或mixin将val（isMobile）存储在全局可访问的变量中。这将允许您创建可以进行代码拆分的组件的移动版本，并具有单独的css文件。我认为这将使应用程序更容易长期维护（恕我直言，但这取决于一些因素）。
答案 1 :(得分：0)
如果您有2个不同的Vue文件，一个用于移动设备，另一个用于桌面，您可以按照此答案的说明进行操作：