본문 바로가기

Vuetify2

Vue/Firebase 이용해서 홈페이지 만들기 (3) - Navigation drawers 만들기 오늘의 목표 Navigation drawers에 대해 알아보고 내 홈페이지에 추가해보자. #1. Navigation drawers란? - 앱에서 좌측 상단에 나오는 버튼을 이용하여 홈페이지의 곳곳을 이동할 수 있게 도와주는 역할을 한다. - 아래의 사이트로 접속하여 Navigation drawers에 대한 예제코드를 살펴보면 도움이 될 것이다. Navigation drawer component The navigation drawer component contains internal navigation links for an application and can be permanently on-scre... vuetifyjs.com - 위 사이트에 나온 예제의 소스를 참고하여 작성한 것이니 직접 타이핑하거나.. 2020. 10. 13.
Vue/Firebase 이용해서 홈페이지 만들기 (2) - Vuetify 추가, app bar/footer 만들기 오늘의 목표 Vuetify css framework 추가한 후 기본적인 홈페이지 틀에 대해 익혀보자. #1. Vuetify 추가하기 #2. app bar, footer 셋팅하기 #1. Vuetify 추가하기 - 프로젝트가 있는 폴더에서 터미널을 열어 vue add vuetify 명령어를 실행시키자. 옵션은 아래와 같이 선택하였다. - 다시 서버를 띄우고 (npm run serve) 로컬서버에 접속해보았다. - 이제 Vuetify에서 미리 구현된 버튼, 앱바, 툴바, 네비게이션 등의 여러 기능을 가져다 쓸 수 있게 되었다. #2. app bar, footer 셋팅하기 - app bar 추가하기 : vuetify에서 v-app-bar-nav-icon은 좌측 상단의 네비게이션을 위한 아이콘이다. 아래와 같이 .. 2020. 10. 13.