[Vue CLI] 02. 프로젝트 생성 및 plugins(feat.vuetify)

Vue CLI를 통해 생성된 프로젝트가 어떤 폴더 구조로 되어있고 2.0과 달리 3.0에는 어떠한 기능들이 추가되었는지 알아보고

그중에 vuetify라는 새로운 플러그인을 설치해서 사용하는 방법을 알아보도록 한다. 

 

 

node_modules : 여러가지 부품들을 가지고 자동차를 조립한다면 그 부품들을 모아두는 곳.

2.0 버전에서는 npm install이라는 명령어를 통해 node module들을 설치해줘야 하지만

3.0부터는 node_modules가 프로젝트 생성하는 순간 생성된다. 

그리고 npm run dev라는 명령어로 프로젝트를 실행시켰지만 npm serve라는 명령으로 실행 가능.

 

 

package.json : node_modules 폴더 안에 있는 것들 중 어떤 것을 설치되어야 하는지 내역을 적어두는 곳 

 

main.js : 프로젝트에서 이 어플리케이션을 구동시켜줌 

router.js : 라우터 조절 

store.js : 전역 상태 값 조절

 

 

 

plugins

: 프로젝트를 시작할 때 개발환경을 구축하기 위해 자신에게 필요한 것들을 몇 가지 선택했었다. 

원래 기존 버전에서는 선택하고 추후에 수정해야 되는 일이 있다면 복잡한 과정을 거쳤지만

이제는 플러그인이라는 기능을 통해 개발 중에도 개발환경을 위해 추가 할수 있음. 

 

 

vuetify 추가

1. 터미널에서 vue add vuetify 명령어를 입력

2. Choose a preset: Default (recommended) 선택

 

 

 

설치가 완료 된 후 포트가 바뀌어있었다. 

 

 

바뀐 포트로 실행하면 vuetify가 적용된 화면을 확인할 수 있다. 

 

 

www.youtube.com/watch?v=KKY__3VW748&list=PLZzSdj89sCN0sLqrTKf2m7lXe_93C19UG&index=2