vuej를 사용한 다른 모바일 및 데스크톱 레이아웃

vuej를 사용한 다른 모바일 및 데스크톱 레이아웃

vue를 사용하여 모바일 뷰와 데스크톱 뷰에 다른 레이아웃 또는 컴포넌트를 사용자에게 제공할 수 있는 가볍고 스마트한 방법을 찾고 있습니다.

제 웹 어플리케이션은 많은 테이블로 구성되어 있습니다.모바일 디바이스에서 사용할 때 테이블은 좋은 경험이 아닙니다(테이블을 사용할 수 있는 방법은 많지만 즐길 수 없습니다).

그래서 사용자가 데스크톱에서 웹 앱에 접속하는지 모바일에서 접속하는지 여부를 검출할 수 있도록 vue js를 만들려고 합니다.사용자가 데스크톱에서 열면 오래된 테이블이 나타납니다. 왜냐하면 데스크톱 사용자가 가지고 있기 때문입니다.그러나 모바일 디바이스에서 사용자가 열면 모바일 디바이스에 적합한 카드 또는 패널과 같은 뷰가 표시됩니다(일반적으로 세로 방향).

뛰어난 부트스트랩 프레임워크를 갖춘 솔루션이 있다는 것은 알고 있습니다만, 스와핑이 아니라 모든 부분(대부분 html)을 렌더링하고 화면 크기에 따라 각 부분을 숨깁니다.

그러나 vue js에서 이러한 기능을 구현하는 훨씬 효율적이고 현명한 방법이 있을까요?

2개의 다른 vue 파일이 있는 경우 하나는 모바일용이고 다른 하나는 데스크톱용입니다.다음 답변에서 설명하겠습니다.

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

레이아웃의 차이에 대처하기 위해서는 css를 고려해야 한다고 생각합니다만, 이것에 대한 제 견해는 사용자가 모바일과 PC/노트북 간에 단순히 div의 크기와 배치를 달리하는 것뿐만 아니라 크게 다를 수 있다는 것입니다.디바이스에 따라 다른 경험을 제공한다면 js의 차이를 처리하는 것이 더 효과적일 수 있습니다.

http://detectmobilebrowsers.com/ 와 같은 라이브러리를 사용하여 사용자가 모바일을 사용하고 있는지 확인할 수 있습니다.그 후, 그 값을 보관합니다).isMobilevuex, bus 또는 mixin을 사용하여 글로벌하게 액세스할 수 있는 변수입니다.이를 통해 코드 분할할 수 있는 컴포넌트의 모바일버전을 생성하여 개별 css 파일을 가질 수 있습니다.그 때문에, 애플리케이션의 장기적인 유지보수가 용이하게 됩니다(IMHO, 단, 이것은 몇개의 요인에 의해서 다릅니다).

언급URL : https://stackoverflow.com/questions/47373633/different-mobile-and-desktop-layout-with-vuejs