vuetify 예제 속시원내과 | 2019년 8월 3일

는 배경 테마가 검은색또는 어두워진다는 것을 의미합니다. 또한 Vue 응용 프로그램에 대한 헤더 탐색 항목을 정의합니다. 또한 Vuetify에 포함된 클래스 속성 및 색상 이름을 추가하여 배경색 또는 v-toolbar 구성 요소 색상만 변경할 수 있습니다. 이 코드는 Vuetify에 필요한 태그로 응용 프로그램을 래핑합니다. 그 태그 안에는 태그가 있습니다. 그 안에는 태그가 있습니다. 라우터 보기 태그에 현재 페이지가 표시됩니다. 홈 페이지에 있을 때 홈 보기를 표시 합니다. about 페이지로 이동하면 about 보기가 표시됩니다. 기존 범주를 업데이트 및 삭제하거나 새 범주를 만드는 데 사용되는 Vue/Vuetify로 빌드된 CRUD 양식의 간단한 예로 TechStack의 CategoryEdit.vue를 살펴보겠습니다. 전체 구현에 대 한 소스 코드를 참조, 강조 하 고 양식의 유효성을 검사 하 고 API 요청을 보낼 기능을 포함 하는 주요 부분을 문서화 합니다.

Vuetify는 재료 디자인 구성 요소 프레임워크입니다. 부트스트랩과 비슷합니다. Vuetify는 Vue에서 SPA를 스타일링하는 데 사용할 수 있는 80개 이상의 재료 디자인 구성 요소를 제공합니다. Vuetify에서 구성 요소를 사용하고 있습니다. 이것은 탐색에서 사용한 것과 동일한 구성 요소입니다. 이번에는 소품 팹을 버튼에 적용합니다. 부동 버튼은 둥글며 일반적으로 아이콘이 포함되어 있습니다. 아래쪽 화살표의 아이콘을 추가하려고 합니다. 구성 요소는 표시할 아이콘의 이름을 입력해야 합니다. Vuetify와 함께 사용할 수 있는 모든 재질 아이콘 목록은 다음과 같습니다. Vuetify는 다양한 화면 크기에 대한 메뉴를 표시하는 두 가지 도구를 제공합니다. 중간 및 대형 화면의 경우 Vuetify 구성 요소를 사용할 것입니다.

작은 화면에서 우리는 구성 요소를 표시합니다. 첫 번째 링크 태그는 일부 Vuetify UI 구성 요소에 대 한 재질 디자인 아이콘과 함께 Google Roboto 글꼴을 추가 합니다. 두 번째 링크 태그는 글꼴 굉장 한 아이콘을 가져오고 소셜 공유 단추를 사용자 지정 하는 데 사용 합니다. 버튼에 대한 자세한 내용은 Vuetify 설명서를 참조하십시오. 구성 요소로 루트 요소를 만들어 Vuetify 레이아웃 구성표를 사용합니다. 그 안에는 구성 요소를 사용합니다. 레이아웃에 대 한 열의 소품을 추가 합니다. 레이아웃은 Flexbox를 기반으로 하므로 모든 콘텐츠를 세로로 정렬합니다. 모든 텍스트 항목은 구성 요소에 있습니다.

거기 당신은 그것을 가지고! 이 자습서에서는 디자인, 개발부터 애니메이션까지 Vue.je 및 Vuetify UI 라이브러리를 사용하여 소셜 공유 작업을 처리하면 프로덕션 준비가 된 아름다운 애니메이션 뉴스 응용 프로그램을 만들었습니다. Vuetify 재료 대시 보드는 Vuetify와 Vuex를 통해 구축 된 아름다운 자원입니다. 그것은 당신이 시간에 대시 보드 개발을 시작하는 데 도움이됩니다. 모든 양식은 각각 일반 서비스 예외를 표시하는 유효성 검사 오류요약이 있는 것과 동일한 접근 방식을 따르며 클라이언트 측 및 서버 유효성 검사 오류를 모두 표시하도록 구성된 Vuetify Input 컨트롤을 사용합니다. 규칙 특성은 클라이언트 유효성 검사 규칙이 할당된 위치이며 템플릿 내에서 인라인으로 선언할 수 있지만 동일한 규칙이 /shared/utils.js로 선언된 여러 구성 요소에서 공유되므로 선언됩니다. 프로젝트가 설정되고 모든 초기 종속성이 설치되면 새로 만든 프로젝트로 이동하여 npm을 사용하여 Vuetify UI 패키지를 추가합니다. Google의 머티리얼 디자인에 따른 일관된 시각적 미학과 일관된 시각적 미학을 모두 제공하는 다양한 수의 활발하게 유지 관리되고 아름답게 디자인된 구성 요소로 생산성을 높일 수 있습니다. 무대 뒤에서 Vuetify 구성 요소는 당신이 원하는만큼 또는 당신이 원하는만큼 Vuetify 구성 요소를 사용하도록 선택할 수있는 기존의 Vue 앱에 추가 할 수있는 Vue 구성 요소입니다. 이렇게 하면 이미 언급한 Vuetify UI 기반 라이브러리가 설치되며 웹 응용 프로그램을 완벽하게 디자인하는 방법을 확인할 수 있습니다.

Comments are closed.