[Vue.js] Vue CLI로 Vue 프로젝트 생성하기

Vue CLI - Vue Command Line Interface

Vue 프로젝트를 빠르게 구성하고, 빌드, 배포할 수 있게 도와주는 플러그인

 

Vue CLI 설치

npm install -g @vue/cli

 

npm에 등록된 패키지는 npm install 패키지명 을 통해 설치할 수 있다.

패키지를 설치할 때 사용가능한 옵션이 여러 가지 있지만, -g와 --save에 대해서만 짚고 넘어간다.

 

npm install -g 패키지명

-g(global) 옵션은 설치하는 패키지가 현재 디렉토리뿐만 아니라 앞으로 생성하게 되는 모든 프로젝트에서 사용할 수 있는 global 패키지로 등록된다.

 

npm install 패키지명 --save

현재 작업중인 디렉토리 내에 있는 ./node_modules에 패키지를 설치한다.

그 다음에 package.json 파일에 있는 dependencies 객체에 지금 설치한 패키지 정보를 추가한다.

설치되는 모든 패키지는 node_modules 디렉토리에 설치된다.

node_modules 디렉토리에서 현재 사용하고 있는 모든 패키지를 확인할 수 있다.

 

--save 옵션을 사용하면 package.json 파일에 설치한 패키지 정보가 추가되기 때문에

package.json 파일을 팀원들에게 공유하면 명령어 npm install을 통해 현재 내 프로젝트 디렉토리에 없는 패키지 전체를 한번에 설치할 수 있다.

 

vue create vue-project

디렉토리명을 vue-project 로 하여 프로젝트를 설치한다.

Vue 3 버전을 사용할 것이므로 아래의 Vue 3을 선택하여 설치를 진행한다.

그렇게 되면 왼쪽 패널에 Vue 프로젝트를 생성하면서 vue-project 의 이름으로 폴더가 생성되고,

프로젝트 폴더 하위로 Vue 프로젝트 개발을 위한 기본적인 파일들이 자동으로 생성된다.

 

Vue 프로젝트 실행

프로젝트 생성이 끝나면 터미널에 표시된 가이드대로 명령어를 입력하여 프로젝트를 실행해본다.

 

cd vue-project

프로젝트 폴더로 이동

 

npm run serve

서버가 시작되며, 프로젝트가 기본 포트 8080으롷 실행된다.

 - 기본 포트 이외의 포트를 사용하려면 npm run serve -- --port 포트번호  명령어로 직접 포트번호를 지정할 수 있다.

 ex) npm run serve -- --port 3000

 

크롬을 켜서 확인을 해보고, 아래 화면이 나타나면 Vue 프로젝트가 정상적으로 설치된 것이다.

Vue 프로젝트 실행 화면

 

 

Vue 프로젝트 파일 구조

설치된 프로젝트에 어떤 파일들이 생성되었는지 기본적인 구조를 살펴보자

Vue 프로젝트 파일 구조

node_modules	npm으로 설치된 패키지 파일이 모여 있는 디렉토리
public	웹팩(webpack)을 통해 관리되지 않는 정적 리소스가 모여 있는 디렉토리
src/assets	이미지, css, 폰트 등을 관리하는 디렉토리
src/components	Vue 컴포넌트 파일이 모여 있는 디렉토리
App.vue	최상위(root) 디렉토리
main.js	가장 먼저 실행되는 자바스크립트 파일로써, Vue 인스턴스를 생성하는 역할
.gitignore	깃허브에 업로드할 때 제외할 파일 설정
babel.config.js	바벨(Babel) 설정 파일
package-lock.json	설치된 package의 dependency 정보를 관리하는 파일
package.json	프로젝트에 필요한 package를 정의하고 관리하는 파일
README.md	프로젝트 정보를 기록하는 파일

 

package.json 파일 구성

name	프로젝트 이름을 입력
version	프로젝트의 버전 정보를 입력
private	이 옵션을 true로 설정 시, 해당 프로젝트를 npm으로 올릴 수 없다. 개발자가 실수로 해당 프로젝트를 npm에 올리더라도 이 옵션이 true로 되어 있으면 배포를 막을 수 있다.
scripts	프로젝트 실행과 관련된 명령어들을 등록한다. 프로젝트 실행, 빌드 등과 같이 프로젝트 개발, 운영 시 사용되는 다양한 scripts 명령어를 등록하고, 쉽게 사용할 수 있다. 개발자가 직접 정의한 script는 npm run 명령어로 사용하고, npm에서 제공되는 명령어는 npm 명령어로 사용한다.
dependencies	사용중인 패키지 정보를 입력한다.
devDependencies	프로젝트 배포 시 필요없는, 개발 시에만 필요한 패키지 정보가 등록되는 곳
eslintConfig	ESLint는 일관성 있게 코드를 작성하고 버그를 식별하고 회피할 목적으로 ECMAScript/Javascript 코드에서 발견된 패턴을 개발자에게 알려주는 플러그인이다. 구문 분석을 위해 babel-eslint를 파서로 사용
browserslist	전 세계 사용 통계 속에서 상위 1% 이상 사용된 브라우저, 각 브라우저의 최신 버전 2개를 지원하도록 한다.

패키지를 설치하면 dependencies, devDependencies, eslintConfig 등은 자동으로 채워지며, 

name, version, private 등은 사용자가 직접 입력해서 등록한다.

 

사실 package.json을 이루는 옵션은 매우 많다.

표로 정리한 내용은 그 중에서도 Vue CLI를 통해서 작성된 옵션들이다.