vue-cli 및 ElementUI로 tiqav 클라이언트 구축

계속Anglar Material로 tiqav 클라이언트 제작,vue.js에서도 tiqav 클라이언트를 만들어 보았습니다.
vue.처음 js를 하는데 튜토리얼 이후에 하기 때문에 안 좋은 점이 있을 수 있지만 이런 규모의 프로젝트를 완성하면 많은 것을 배울 수 있으니 개요와 창고를 소개해 드리겠습니다.

Demo

참고: 일부 브라우저에는 블렌드 컨텐트에 대한 경고가 표시됩니다.
※ Google Chrome의 경우 주소 표시줄에 표시된 방패 모양 표시를 혼합하여 내용을 볼 수 있습니다.

개요

본가의 tiqav에서는 랜덤 디스플레이와 검색 외에 API를 준비한 새 투고(newest) 화면도 제작됐다.
화면 일람.

Search(검색 결과 표시)

뉴스트

랜덤

items(이미지 상세 표시)

위 3개는 축소판 그림의 일람을 표시하는 화면이며, 이미지의 상세 및 연관된 이미지를 표시하는 Dialog는 모든 화면의 공통 구성 부분으로 구현됩니다.본가tiqav에 없는 기능으로 화면에 있는 라벨의 일람 디스플레이와 라벨 클릭을 상세하게 표시하는 검색 기능을 실현하였습니다.

사용한 라이브러리 등

CLI

vue-cli를 개발하여 사용했습니다.
vue-router의 설정, 환경 설정 파일 제작 등이 처음부터 있었기 때문에 개발이 매우 편안하다.
안 쓰는 손이 없을 것 같아서요.

$ vue -V 
2.9.1

프로젝트를 만들 때 webpack 템플릿을 사용했습니다.

vue init webpack tiqav-vue-frontend
cd first-vue-app
? Project name tiqav-vue-frontend
? Project description A Vue.js project
? Author daikiojm <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
npm install
npm run dev

UI 구성 요소 라이브러리

제목과 같이 ElementUI를 사용했습니다.
열 레이아웃, form, button 등 구성요소 외에 오토컴플렉스, 태그 등 편리한 구성요소도 준비돼 있어 CSS에서 조형이 최소화되고 품질이 높은 UI를 스스로 구현할 수 있다.부트스트랩과 비슷하게 색다른 디자인이 좋은 느낌이에요.

Ajax

vue-resource가 은퇴한 것 같아서 사용했어요axios.
이걸로 하면 맞을 것 같은데.
이번에 사용한 티qav의 API는 JSONP 형태여서 axios-jsonpadapter와 함께 사용했습니다.

Lazy Load(이미지 지연 읽기)

이미지의 LaxyLoad가 사용됩니다vue-lazyload.(newest, 검색, random에 사용되는 이미지 일람표)
사용 방법은 간단하다. img 라벨에 v-lazy 디렉터리를 추가하면 된다.

감상

이번에는 각 구성 요소가 정의한method에서만 aax 작업을 진행했습니다.View 템플릿에 내용을 반영하는 간단한 내용입니다. 단,vue.js 데이터 귀속의 기본 기능인 vue-router,axios 등을 사용할 수 있습니다.
다음은 vuex를 통해 상태를 관리하는 더 큰 응용 프로그램을 만들어 보려고 합니다.

출처