vuejsを使用したモバイルとデスクトップのレイアウトが異なる

Question

私は、vueを使用してモバイルやデスクトップのビューに異なるレイアウトやコンポーネントを提供するための軽量でスマートな方法を探しています。

私のWebアプリケーションは、テーブルの多くで構成されており、あなたのすべてのテーブルには最高の経験ではありません知っているように、モバイルデバイスでの使用は

を（たとえ表が使用可能でなく、楽しくないようにする方法がたくさんあると思った）ときだから私は、ユーザーがデスクトップやモバイルデバイスからWebアプリケーションにアクセスするかどうかを検出するvue jsを作ることを考えています。ユーザーがデスクトップで開くと、デスクトップ不動産のデスクトップユーザーのために古いテーブルが表示されます。しかし、モバイルデバイスでユーザーが開くと、モバイルデバイスに適したカードやパネルのような表示が表示されます（一般的にポートレートの向き）

私はそれを行うことができる素晴らしいブートストラップフレームワークを持つソリューションがあることを知っていますが、代わりにすべての部分（ほとんどの部分のhtml）をレンダリングし、画面サイズに応じて各部分を隠すだけです。

しかし、vue jsでこれらの機能を実装する方がずっと効率的でスマートな方法がありますか？

Answer 1

私はあなたがレイアウトの違いを処理するために CSSを検討すべきであるが、この上の私の見解は、ユーザーが/アプリの/ etcコンテンツとの対話の方法は超えて、モバイルとPC /ノートパソコンの間で大幅に異なる可能性があることだと思いますdivのサイズを変更して配置するだけです。あなたは、デバイスに基づいて異なる十分な経験を提供している場合、あなたのjsの違いを処理することがあなたのために良い仕事かもしれません。

http://detectmobilebrowsers.com/のようなライブラリを使用して、ユーザーがモバイルを使用しているかどうかを判断できます。次に、そのval（isMobile）を、vuex、bus、またはmixinを使用して、グローバルにアクセス可能な変数に格納します。これにより、コンポーネントをコード分割し、別々のCSSファイルを持つモバイルバージョンのコンポーネントを作成することができます。私はアプリケーションが長期的なメンテナンスを容易にすると思っています（IMHO、これはいくつかの要因によって決まります）。