[Vue.js] Vuetify 설치 및 튜토리얼 학습

[Vue.js] Vuetify 설치 및 튜토리얼 학습

[Vue.js] Vuetify 설치 및 튜토리얼 학습1. vuetify 사전 세팅2. vue-cli 를 활용한 프로젝트 생성3. 생성된 프로젝트 확인4. 프로젝트 내 vuetify 패키지 설치 및 vuetify 기반 프로젝트 확인

참고 사이트 : https://vuetifyjs.com/ko/getting-started/quick-start

1. vuetify 사전 세팅

• npm 패키지 툴을 활용하여 vue-cli 를 설치한다.

  $npm install -g @vue/cli
  

   

2. vue-cli 를 활용한 프로젝트 생성

• test-app 프로젝트 생성

  $ vue create test-app
  

   

3. 생성된 프로젝트 확인

• vue-cli 기반으로 생성된 vue.js 프로젝트의 구동을 확인

  (아직 vuetify 가 설치된 단계는 아님)

  $ cd my-app
  $ npm run serve
  

• http://localhost:8080/ 로 접속하여 서버 구동 상태 확인

4. 프로젝트 내 vuetify 패키지 설치 및 vuetify 기반 프로젝트 확인

• 프로젝트 디렉토리 내에서 vue-cli로 vuetify 패키지를 추가

  $ vue add vuetify
  $ npm run serve