[ Vue ] CLI로 SPA프로젝트 생성하기 + Vuetify

 

  Vue CLI  

Vue CLI 는 Vue.js 를 생성, 관리, 실행할 수 있는 Command Line Interface 이다.

Vue CLI 를 사용하면 Webpack, Babel, Lint, TypeScript, Vue Router, Vuex 등의 다양한 피쳐들을 선택해서 프로젝트를 생성할 수 있다.

 

 

CLI 설치

 

npm install -g @vue/cli

 

프로젝트 생성

 

//vue create 생성할프로젝트이름
vue create new-project-name

“Please pick a preset:” 선택옵션에서 나오면 “default(babel, lint)” 항목을 선택한다.

 

프로젝트 실행

 

npm run serve

 

 

  Vuetify  

Vuetify는 Vue.js를 위한 개발된 디자인 프레임워크이다.

React에서 사용했던 Meterial Ui나 Bootstrap같은 느낌!

 

 

Vuetify 설치

 

vue add vuetify

 

? Choose a preset: (Use arrow keys) 선택 옵션이 나오면 ❯ Default (recommended) 선택한다.

 

프로젝트 실행으로 확인

 

npm run serve

 

 

 

main.js

import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
  vuetify
}).$mount('#app');

 

 

---

✓ 참고

skypacific.github.io/2019/02/16/kang.heehun@introduce_vuetify.html