PWA + Vue-CLI 3 학습하기 #2 - vuetify

이전글 PWA + Vue-CLI 3 학습하기 #1

 

Add CSS Framework

여러가지 모듈이 있지만 호환성이 좋은 메테리얼 기반의 UI를 제공하는 Vuetify를 add-on 해보자.

$ vue add vuetify

 

Choose a preset 에서 Default 를 선택합니다.

 Installing vue-cli-plugin-vuetify...
 
+ vue-cli-plugin-vuetify@0.5.0
added 1 package from 1 contributor and audited 30913 packages in 10.84s
found 0 vulnerabilities
 
✔  Successfully installed plugin: vue-cli-plugin-vuetify
 
? Choose a preset: Default (recommended)
 
🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...
 
added 2 packages from 1 contributor and audited 30920 packages in 12.765s
found 0 vulnerabilities
 
⚓  Running completion hooks...
 
✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:
 
     src/assets/logo.svg
     src/plugins/vuetify.js
     package-lock.json
     package.json
     public/index.html
     src/App.vue
     src/components/HelloWorld.vue
     src/main.js
     src/views/Home.vue
 
   You should review these changes with git diff and commit them.

 

설치 이후에 다시 서버 실행 합니다.

$ npm run serve

 

localhost:8080 으로 접속하면 달라진 화면을 볼 수 있습니다.

다른 레이아웃을 적용할때는 App.vue 파일을 정리하면 됩니다.