다른 모바일 및 데스크톱 레이아웃과 vuejs

Question

저는 vue를 사용하여 모바일 및 데스크톱보기에 다른 레이아웃이나 구성 요소를 제공하는 방법을 찾고 있습니다.

내 웹 응용 프로그램은 테이블의 많은 구성하고 모든 테이블이 최상의 경험하지 않다 알고 모바일 장치에서의 사용은

을 (심지어 테이블이 가능한하지만 즐거운되지 만드는 방법이 많이있다 생각) 할 때 그래서 vue js가 데스크탑이나 모바일 장치에서 웹 응용 프로그램에 액세스하는지 여부를 감지하려고합니다. 사용자가 데스크톱에서 열면 데스크톱 사용자가 있기 때문에 좋은 오래된 테이블을 보여줍니다. 그러나 모바일 장치에서 사용자가 열면 카드 나 패널이 모바일 장치 (일반적으로 세로 방향)에 더 적합한보기로 표시됩니다.

나는이를 수행 할 수있는 훌륭한 부트 스트랩 프레임 워크가있는 솔루션이 있음을 알고 있지만 그렇지 않습니다. 스와핑 대신에 모든 부분을 렌더링 (대부분의 경우 HTML)하고 화면 크기에 따라 각 부분을 숨 깁니다.

하지만 vue js에서 이러한 기능을 구현하는 데 훨씬 효율적이고 스마트 한 방법이 있습니까?

Answer 1

은 레이아웃 차이를 처리하기 위해 CSS를 고려해야한다고 말했지만, 이에 대한 내 견해는 사용자가 콘텐츠/앱 /과 상호 작용하는 방식이 모바일과 PC/노트북간에 크게 다를 수 있다는 것입니다. div 크기 조정 및 배치 만 다릅니다. 기기에 따라 다른 경험을 충분히 제공한다면 j의 차이를 처리하는 것이 더 효과적 일 수 있습니다.

http://detectmobilebrowsers.com/과 같은 라이브러리를 사용하여 사용자가 모바일을 사용하고 있는지 확인할 수 있습니다. 그런 다음 해당 값 (isMobile)을 vuex, bus 또는 mixin을 사용하여 전역 적으로 액세스 가능한 변수에 저장하십시오. 이렇게하면 코드 분할이 가능하고 별도의 CSS 파일이있는 구성 요소의 모바일 버전을 만들 수 있습니다. 내가 생각하기에 애플리케이션을 장기간 유지하기가 더 쉬울 것이라고 생각한다. (IMHO,하지만 이것은 몇 가지 요인에 달려있다.)