Vuetify
이제 막 페이지와 레이아웃까지 잡았는데, 이제는 디자인, 화면, 프론트단을 만들어 보려고 한다.
react에서는 ant-design이 대세였는데, Vue에서는 Vuetify를 사용할 예정.
Vuetify는 한마디로 자주쓰는 컴포넌트들을 미리 구성해놓은 프레임워크다.
설치명령어는
npm -> npm i vuetify @nuxtjs/vuetify
yarn -> yarn add @nuxtjs/vuetify
@nuxtjs/vuetify를 설치하는 이유?
Nuxt는 외부 라이브러리에 연결하는 방법이 독특하다.
Nuxt는 싱글페이지가 아니고, 페이지가 여러개며
기존 Vue식으로는 이럴때 다른 페이지에도 따로따로 외부 라이브러리를
연결해줘야만 했다.
그러나 Nuxt에서는 그저 nuxt.config.js의
module에 '@nuxtjs/vuetify' 한 단어를 추가해넣음으로써
노드 모듈의 plugin.js에서 모든 페이지에 자동 import를 해주며,
우리는 손쉽게 해당 기능을 사용할 수 있게 되었다.
'framework(Vue_Nuxt)' 카테고리의 다른 글
Vue.js 화면 구성하기, 기본 문법 (0) | 2019.12.09 |
---|---|
서버사이드렌더링, 싱글페이지렌더링(클라이언트사이드렌더링) (0) | 2019.12.06 |
Vue 라이프 사이클 이해하기 (0) | 2019.12.06 |
Nuxt router와 layout, head (0) | 2019.12.05 |
Nuxt설치 및 pages 생성(Node기반 SNS 만들기 (0) | 2019.12.04 |