웹 앱의 시각적 구성 요소 캡슐화를 위한 새로운 프레임워크의 출현은 라우팅, 보안, SPA 및 PWA 지원, 국제화, 그리고 물론 UI와 같은 몇 가지 다른 요구 사항을 강조했습니다.
웹 개발 및 하이브리드 모바일 애플리케이션에 널리 채택된 Vue.js 도 마찬가지입니다 . 구성 요소 논리와 전체 응용 프로그램에 중점을 두고 있지만 페이지에 스타일과 디자인을 붓기 위해 다른 유형의 UI 라이브러리 또는 프레임워크와 지속적으로 작업해야 합니다.
반면에 시각적 구성 요소 및 화면 디자인의 사용자 지정 및 촉진을 처리하는 수많은 UI 프레임워크 중에서 유명한 Material Design 표준을 채택한 프레임워크가 있습니다. 응답성, 유연성 및 확장성을 갖춘 데스크톱 및 모바일 세계를 모두 수용하기 때문에 커뮤니티에서 이 옵션을 널리 받아들였습니다.
Vuetify 란 ?
Vuetify는 머티리얼 디자인 사양을 준수합니다. 즉, Vue와 Material의 핵심 기능은 기본적으로 사용 가능하며 두 커뮤니티에서 모두 개선할 수 있습니다. 또한 Vuetify는 다음을 제공합니다.
- Vue CLI-3 및 RTL과의 호환성
- 다양한 프레임워크용 템플릿(Cordova, webpack 등)
- 국제화
- SSR 및 PWA
그러나 Vuetify를 사용한다는 것은 머티리얼 디자인을 원하고 수용할 것임을 의미합니다. 예를 들어 iOS용 앱은 Vuetify에 적합하지 않습니다. 마찬가지로 전체적인 스타일과 관련하여 사용자 정의 디자인이 필요한 경우 Vuetify도 적합하지 않을 수 있습니다. 항상 그렇듯이 프로젝트 요구 사항에 대해 사전에 심층 분석을 수행해야 합니다.
Vuetify가 어떻게 작동하는지 더 잘 이해하고 맛을 보려면 아래 이미지를 살펴보세요.
LogRocket의 가격 책정 페이지 (가격 책정 메뉴에서 플랜 선택) 의 요소를 사용하여 처음부터 간단하고 반응이 빠른 재료 기반 페이지를 만들어 보겠습니다. 요소의 레이아웃은 매우 직관적이며 카드의 템플릿은 예를 들어 Bootstrap이 그리드와 함께 작동하는 방식을 연상시킵니다.
Vueti 설치 및 세팅
프로젝트에 필요한 모든 것을 배치하는 것으로 시작하겠습니다. 먼저 컴퓨터에 최신 버전의 Node.js/npm이 설치되어 있어야 합니다. 이 자습서에서는 Node v14.17.4 및 npm v6.14.14를 사용합니다. nvm 을 사용 하여 노드 버전을 더 잘 관리할 수 있습니다.
Vue CLI를 전역적으로 설치하려면 먼저 이전 버전이 있는지 확인하는 것이 중요합니다(패키지 이름이 에서 로 변경됨 ). 확인하려면 다음 명령을 실행하여 이전 패키지를 전역적으로 제거해 보십시오.
npm uninstall -g vue-cli
npm install -g @vue/cli
vue --version
@vue/cli 4.5.13
vue create vuetify-logrocket
cd vuetify-logrocket
vue add vuetify응용 프로그램을 시작하려면 npm run serve명령을 실행하기만 하면 됩니다. 이것은 또한 파일 변경 감시자가 시작하고 편집 내용을 듣고 페이지를 자동으로 업데이트하도록 합니다.
Vuetify 페이지 사용자 지정
uetify가 생성한 콘텐츠를 사용하지 않기 때문에 모든 콘텐츠 를 삭제할 수 있습니다. 세 가지 중에서 화면의 첫 번째 부분을 구성하는 것으로 시작하겠습니다.
- 탐색(도구 모음 및 메뉴)
- 본문(가격에 대한 계획 카드가 있는 곳)
- 보행인
Navigation
navigation drawer탐색은 모바일 앱이나 스마트폰(햄버거 아이콘 템플릿 사용)에서 보는 웹사이트 의 공통 사항과 함께 데스크탑을 통해 볼 때 심층 메뉴 표시 패턴을 따릅니다.
<v-navigation-drawer>(모바일 시각화의 경우) 및 <v-toolbar>(데스크톱 시각화) 구성 요소가 공존 해야 하기 때문에 이 작업을 수행합니다 .
몇 가지 다른 중요한 고려 사항을 살펴보겠습니다.
- 이 app지시문은 Vuetify가 더 글로벌 수준에서 애플리케이션에 속한다는 것을 이해하도록 두 구성 요소에 모두 사용됩니다.
- v-model우리가 사용하는 모델의 유형을 정의합니다(이 경우 drawer. 이 요소는 메뉴 목록이 매달려 있는 것처럼 보이지 않도록 하는 데 중요합니다. 항목을 제공하는 JavaScript는 목록의 끝에 있습니다.
- 나머지 콘텐츠는 요소에 미리 정의된 메뉴 요소를 반복하는 루프를 나타냅니다 menus. 여기에서는 <v-list>구성 요소 를 사용하여 제목 하위 요소( <v-list-title>)와 구분자( <v-divider>) 를 반복하고 구성합니다.
- 요소 에서 <v-toolbar>Vuetify의 기본 야간 스타일 가져오기에 대해 dark 지시문을 사용하는 것을 볼 수 있습니다.
구성 <v-toolbar-side-icon>요소는 햄버거 아이콘을 나타냅니다. 물론 모바일 모드에서 볼 때만 나타나야 하므로 도구 모음의 모든 요소가 머티리얼 디자인 뷰포트 중단점 에 대한 CSS 클래스를 수신 합니다.
이것은 현재 뷰포트를 기반으로 요소 표시를 제어하는 Vuetify의 기본 메커니즘입니다. 아래의 각 Vuetify 접두사에 대한 공식 치수 표를 참조하십시오.
댓글