[Vue] Vue-cli를 이용하여 프로젝트 생성 및 실행

안녕하세요, Einere입니다.

(AD block을 꺼주시면 감사하겠습니다.)

---

오늘은 Vue-cli를 이용하여 간단하게 프로젝트를 생성하고 빌드하는 방법을 알아보겠습니다.

Vue-cli 설치

console창에 "npm install -g vue-cli"를 입력하여, vue-cli를 전역으로 설치합니다.

정상적으로 설치된 것을 확인하시려면, 새로운 디렉토리를 생성한 뒤, "cd"를 이용하여 위치를 해당 디렉토리로 옮겨줍니다.

"vue list"를 입력하여 현재 사용 가능한 템플릿 리스트가 정상적으로 출력되는지 확인합니다.

템플릿과 필요한 패키지 설치

"vue init webpack-simple"을 입력하여, 해당 템플릿을 설치합니다.

중간중간 프로젝트명과 저자 등등을 물어보는데, 잘 모르시면 그냥 엔터만 치시면 됩니다.

"npm install"을 입력하여, 설치된 템플릿에 필요한 패키지들을 설치합니다.

프로젝트 빌드

"npm run dev"를 입력하면 localhost로 해당 프로젝트가 빌드가 됩니다.

보통 자동으로 해당 웹페이지가 열리지만, 열리지 않는 경우, 직접 브라우저에서 접속하도록 합니다.