소개

최근 Vue.js와 Vuetify를 만나
「이런 간단하게 예쁜 사이트 만들 수 있을까!」
라고 충격을 받았습니다.

모처럼이라면 전에 만든 툴의 디자인도 Vuetify로 개선해 보고 싶어 해 보는 것에.

비포

개선 전의 페이지가 이쪽



html과 css만으로 단시간에 만들려고 하면 이런 완성이 되었습니다・・・;

좋은 점을 꼽는다면 단순한 토코카나(?)
그래서 심플을 유지한 채로 디자인을 개선해 보았습니다.

애프터

Vuetify로 디자인을 개선한 것이 이쪽



꽤 좋은 느낌!

전부 <v-card> 안에 납입했습니다.
링크 생성 버튼을 누른 후 표시하고 싶은 요소는 <v-expand-transition> 에 넣는 것으로 깨끗이 했습니다.

사이고에게

Vuetify로 쓰면 엄청 쉽게 UI 개량할 수 있으므로 너무 즐겁다.

실은 프레임워크 사용하는 것은 이번이 처음.
이미 프레임 워크없이 무언가를 만드는 것은 무리 일 수 있습니다.

끝