[Vue] Vue 및 Webpack 설치, 실행

Node.js 설치

Vue를 설치하기 위해서 는 Node.js 설치가 필요하다.

아래 페이지로 가서 자신의 상황에 맞는 버전을 다운받자.

 

나는 우선 메인페이지에 있는 버전으로 설치했다.

설치 과정은 게임 설치하듯이 하면 된다. PATH를 설정하겠냐는 설정이 있을 경우 체크 해주자 (별도 설정없이 CLI로 바로 실행 가능하다)

 

설치가 완료되면 정말 설치가 됐는지(??) 다음 명령어로 확인해보자

• noed -v
• npm -v

설치된 버전 확인

node는 내가 Node.js 설치한 버전이고

npm은 node package manager 버전이다.

npm으로 Vue 설치를 진행해보자.

 

Vue 설치

npm으로 Vue 개발환경 구축을 위해 Vue CLI를 설치하자

Vue CLI 는 Vue 개발환경을 설정해주는 도구로서 기본적인 프로젝트 세팅을 도와준다.
폴더 구조, lint, build, webpack 설정 등의 고민을 덜어준다.

• npm install -g @vue/cli

deprecated가 한 무더기로 나온다..

 

Webpack 설치

Webpack은 JS 애플리케이션을 위한 정적 모듈 번들러로 나중에 Webpack에 대한 포스트를 따로 정리할 생각이다.

설치는 npm으로 다음 명령어를 실행하면 설치가 시작된다.

• npm install webpack-dev-server --save-dev
• npm install --save-dev webpack

난 첫번째 명령어로 설치했다.

어디서 보고 온건지 몰라도 일단 설치는 됐다..

deprecated가 많이 뜬다. 나중에 모두 없애보자

프로젝트 실행

나는 기존에 작업하던(약 1년전..) Vue프로젝트가 있어서 프로젝트를 바로 실행했다.

그런데 기억에 없던 경고가 마구 떨어져서 당황했다.

실행 명령어는 다음과 같다

• npx webpack serve

실행 중 경고

 

그 중 빨간 글씨로 'mode' option has not been set에 집중했다.

1년전에도 개발 모드로 실행했던 기억이 있다..

 

다음 명령어로 실행하니 경고 없이 깔끔하게 실행됐다.

• npx webpack serve --mode=development

편안.