jhhan의 블로그

이번에도 vuetify의 태그에 대해서 알아보겠습니다. 제가 쓰면서 신기했던 그리고 자주 쓰는 부분을 위주로 진행합니다. 1. 첫번째는 v-card 태그입니다. 생각하신 대로 카드 형태를 만들어주는 태그입니다. Vue.js 예상한 카드 형태의 모양을 볼 수 있습니다. 1-1. 이름에서 알 수 있듯이 카드의 제목을 담당합니다. Title Name Vue.js 위 코드에 title 태그만 추가해 보았습니다. 제목이 나타납니다. (기본 설정이 저 정도의 제목으로 나타나는 것이므로 활용을 잘 한다면 멋진 카드를 만들 수 있을 것 같습니다.) 1-2. 역시 이름 그대로 부제목을 나타날 수 있게 해줍니다. Title Name SubTitle Vue.js 위 코드에 또 추가를 해보았습니다. 제목 밑에 부제목이 잘 나..

이번에는 Vuetify를 기본적으로 다뤄보기만 해보겠습니다. 먼저 Vue.js 파일을 만듭니다. 먼저 Vue.js를 선택합니다. 프로젝트의 제목을 입력하시고 그 외의 설정들을 바꾼 후 진행하시면 됩니다. 처음 하신다면 프로젝트 제목만 입력하고 finish 버튼을 누르면 되겠습니다. 그러면 Vue.js 프로젝트가 만들어집니다. 그럼 이제 터미널 창에서 진행합니다. npm run serve를 입력하시면 프로젝트가 실행되면서 화면을 보실 수 있습니다. 이제 'vue add vuetify'를 입력합니다. 그러면 vuetify 관련 파일들이 설치됩니다. 그리고 다시 npm run serve를 입력하시면 vuetify관련 화면으로 바뀐 것을 알 수 있습니다. (관련 캡쳐화면은 하지 못했습니다. 기본 화면이니 쉽게 ..