[Vue] Vue-CLI 프로젝트 생성/실행하기

사용한 컴퓨터가 맥북이라 맥북 기준으로 적어보았다. (윈도우도 크게 다르지 않다)

이번 포스팅은 개인 복습용이 주목적이라 따로 사진을 캡쳐해서 올리지는 않았다.

 

1.  Node.js 설치하기

Vue-CLI를 설치하려면 우선 Node.js가 설치되어 있어야 한다.

구글에 Node.js 다운로드라고 검색하고 다운로드 페이지에 들어간다.

나는 대다수 사용자에게 추천하는 LTS 버전으로 설치했다.

 

다운이 잘 되었는지 확인하려면, 터미널(맥)에서 node -v를 치고 엔터 키를 누른다. 숫자들이 나오면 설치에 성공한 것이다.

 

2. Vue-CLI 설치하기

Vue는 2.x과 3.x의 두 가지 버전을 제공하는데, 각각 입력해야 하는 명령어가 살짝 다르다.

나는 터미널에서 2.x 버전의 아래의 명령어를 입력하였다.

 

npm install vue-cli -global

 

앞에서와 마찬가지로 Vue가 제대로 설치되었는지 확인하려면, 터미널(맥)에 vue -v라고 입력하고 엔터 키를 누른다. 마찬가지로 숫자들이 나오면 성공한 것이라고 보면 된다.

 

3. 프로젝트 생성

Vue 프로젝트를 저장할 폴더를 만든다.

강사님께서는 데스크탑에 저장하면 컴퓨터가 느려질 수 있기 때문에, 내 문서(혹은 도큐멘트)에 들어가서 폴더를 만들 것을 권장하셨다.

 

터미널에서 새로 만든 폴더의 경로를 지정한 후(맥은 ls/윈도우는 cd),

다음의 명령어를 입력한다.

 

vue init webpack-simple

 

 

*참고로 나는 명령어를 입력하는 과정동안 관리자 계정으로 접근해야 설치가 가능했기 때문에, 모든 명령어 앞에 'sudo'를 붙여주었다.

 

 

그러면 6개의 질문이 나오고 일일이 답변해야 된다.

 

Generate project in current directory?(현재 디렉토리에 프로젝트를 생성할 것인가?) y 입력 후 엔터

Project name(프로젝트 이름) cli-template 글씨 나오면 엔터

Project description(프로젝트 설명) A Vue.js project 글씨 나오면 엔터

Author(만든 사람 이름) 적당히 이니셜 치고 엔터

License(라이센스 유형) MIT 글씨 나오면 엔터

Use sass?(Sass 이용할 것인가?) No 나오면 엔터

 

*Sass는 확장된 css 언어이다.

 

 

마지막으로 Vue 애플리케이션을 작동하기 위한 라이브러리의 설치를 위해 터미널에서 아래의 명령어를 입력해준다.

 

npm install

 

 

 

4. 로컬 서버 실행

아래와 같이 추가적으로 명령어를 입력해주면, 이제 브라우저가 실행된다. 

 

npm run dev