Vue 개발환경 셋팅

Vue.js 설치 방법

1. script tag 추가

   지금까지 실습을 통해 사용한 방법이다.

   가장 간단하다고 할 수 있다.

2. NPM을 통해 Vue.js 설치

   Node.js를 설치해 npm library를 통해 Vue를 설치한다.

   대규모 서비스 구축 시 권장된다.

3. vue-cli를 사용해 Vue.js 프로젝트 생성한다.

Vue 프로젝트를 만들고 vuex, vuetify 등을 사용하기 위해서는 2번을 통해 Vue를 설치하고 CLI 환경에서 Vue 프로젝트를 만들어야 한다.

Vue.js 설치 과정

Node.js 설치

Node.js를 설치해서 npm을 설치한다.

npm 업데이트

Node.js 설치시 기본적으로 설치되지만 Node.js보다 자주 업데이트 되므로 주기적으로 npm업데이트를 진행하는 것이 좋다.

$npm install -g npm@latest

$npm -v

$npm -v 로 버전 확인할 수 있다.

npm 자주 사용하는 명령어

- package.json 생성
$npm init
$npm init -y  (default 설정)

- 패키지 설치
$npm install <package명> (지역 설치)
$npm install -g <package명> (전역 설치)
$npm install -save-dev <package명>

- 패키지 삭제
$npm uninstall <package명>
$npm uninstall -g <package명>

- 패키지 업데이트
$npm update <package명>

전역 설치하면 모든 프로젝트에서 사용할 수 있고

지역 설치하면 해당 프로젝트에서만 사용할 수 있다.

플러그인

• 크롬 브라우저 플로그인

  실습 환경은 주로 크롬을 통해 동작을 확인하기 때문에 브라우저에서 Vue 구조를 확인하기 위해서는 설치하는 편이 좋다.

• Visual Studio Code Extension

  만약 VSC를 사용한다면 자동완성을 위해 관련 Extension을 설치하는 편이 좋다.

개발을 편리하게 해주는 다양한 플러그인이 있지만

하나하나 적으면 너무 장황하니

이쯤에서 각설하자

Vue Project 생성

프로젝트 생성
$vue create 프로젝트명 --default

server 실행
$npm run serve

기본적인 project 생성이므로 default로 한다.

많은 설정이 있지만 여기서 설명하긴 그렇고 알아서 찾아보길 바란다.

npm run serve로 서버를 실행할 수 있다.

여기서 조심해야 하는 것은 project 생성 후 해당 폴더로 이동하고 해당 명령어를 실행해야 한다.

서버 실행을 완료하고 CLI에서 알려주는 URL로 접속이 가능하다면 성공적인 개발 환경 셋팅을 한 것이다.