Vue Cli 설치 및 프로젝트 세팅

 

Vue CLI 설치 

vue cli 설치 명렁어

npm install -g @vue/cli

* permission denied 에러 발생시 sudo npm install -g @vue/cli 로 설치해주시면됩니다

 

설치 확인 및 버전 확인

vue -V

 

프로젝트 생성 방법(GUI 형식)

vue ui 실행

vue ui

 

vue ui 를 실행하면 아래와같이 vue 프로젝트를 설정할수있는 웹페이지가 실행이됩니다

 

이후 '만들기' -> 경로 지정후 프로젝트 생성 버튼클릭후

프로젝트명,패키지명,GIT소스 경로등을 설정해줍니다

 

 

기본 세팅을 다한후 '다음' 버튼을 클릭하면 아래와 같이 vue 프리셋 설정화면이 나오는데

저는 우선 기본 프리셋으로 설정하여 진행하였습니다

* 자주쓰는 기능등을 프리셋으로 지정하여 다음 프로젝트를 만들때 간편하게 사용할수있습니다

(vuex,vue router 등)

 

프리셋 설정후 프로젝트 생성이 진행이되며 프로젝트 생성이 완료되며 아래와같은 화면으로 이동하게됩니다

 

기본적인 메뉴들은 아래와 같은 역할을 하고있습니다

플러그인 - 프로젝트에 사용하는 플러그인들을 검색,설치,삭제 할수있는 관리 메뉴입니다

의존성 - 프로젝트 플러그인들의 대한 의존성을 검색,설치,삭제 할수있는 관리 메뉴입니다

설정 - 배포경로, css 설정,eslint와 같은 설정을 할수있는 메뉴 입니다

작업목록 - vue 로컬 화면으로 보기위한 serve, 배포 폴더를 생성하기위한 build 작업을 할수있는 메뉴입니다

 

 

작업목록 메뉴에서 serve 탭을 클릭후 실행버튼을 클릭하면 아래와같은 vue 테스트화면이 보이는것을 끝으로

vue cli 세팅은 끝나게됩니다