Vue 설치 및 프로젝트 시작

1. 설치

Node 설치

Vue Project 를 위해선 Node.js와 npm이 설치되어 있어야합니다.

• Node.js.
  클라이언트 프로그램을 개발하기위해 만흥 라이브러리가 필요한데 이를 빠르게 설치하고 적용하기 위해 Node.js가 설치되어 있어야합니다.
• npm
  npm은 Node.js 기반의 자바스크립트 오픈소스를 등록하고 간단한 명령어를 통해 설치할 수 있도록 해주는 패키지매니저입니다.
  vue와 같은 자바스크립 기반 프레임워크를 통해 개발할 때 npm을 통해 오픈소스를 사용할 수 있습니다.

https://nodejs.org/ko/ 에서 자신의 운영체제에 맞게 Node.js 를 설치합니다.

# 설치 확인 
node -v
# node.js를 설치하면 npm은 자동으로 설치됩니다.
npm -v 

Vue 설치

그 후 npm으로 vue를 설치합니다.

npm install vue
# 설치 확인
npm vue -v

Vue Cli 설치

Vue 설치 확인 후에는 Vue 명령어와 빠른 프로젝트 생성, 관리 라이브러리 vue-cli를 설치합니다.

npm install -g @vue/cli 

Vue 프로젝트 생성을 위해 아래 명령어로 cli-init를 추가로 설치합니다.

npm i -g @vue/cli-init

• -g
  -g 옵션을 사용하면 설치하는 패키지가 현재 디렉토리뿐만 아니라 앞으로 생성하게 되는 모든 프로젝트에서 사용할 수 있는 global 패키지로 등록됩니다.
• --save
  npm install 패키지명 --save 이렇게 설치 시, 현재 작업중인 디렉토리 내에 있는 ./node_modules에 패키지를 설치합니다.
  그 다음에 package.json 파일에 있는 dependencies 객체에 지금 설치한 패키지 정보를 추가합니다.
  즉, package.json에 프로젝트에 필요한 패키지 정보가 정의되게 되어 프로젝트가 커질 경우 패키지 전체를 공유하는 것은 자원 낭비이므로 package.json 파일을 공유하면 패키지 설치가 전체 한번에 가능합니다.

혹시 여기서 설치가 안되고 에러가 나시는 분들은 다음 동작을 취하세요.

에러 해결 설치

1. sudo로 설치
   가령 sudo npm install -g @vue/cli c 이렇게 설치하세요
2. 진행바가 진행되지 않을 경우

• 1. package-lock.json을 삭제하기
• 2. npm install --verbose
• 3. npm set registry http://registry.npmjs.org/

이제 아래 명령어로 터미널에서 Vue 명령어가 정상 동작하는지 확인해보자.

vue -V

2. Vue 프로젝트 생성

프로젝트 생성을 원하는 경로로 이동 한 후 아래 명령어를 통해 프로젝트를 생성합니다.

vue init webpack 프로젝트명

해당 명령어 실행 이후에는 서버 셋팅 관련 선택 창들이 나오는데 프로젝트 성격에 맞게 설정해줍니다.

생성이 다 되고 나면 다음처럼 잘 생성되었다고 나오죠?
터미널 창에서도 어떻게 시작하는 지 보여주고 있는데요 다음처럼 똑같이 동작하면 실행이 됩니다.

cd 프로젝트명 
npm run dev

그리고 localhost:8080 으로 들어가면 화면이 잘 뜹니다.

설치된 패키지 프로젝트 구조는 다음과 같습니다.

• node_modules :
  npm으로 설치된 패키지 파일들이 모여있는 디렉토리
• public :
  웹펙을 통해 관리되지 않는 정적 리소스가 모여있는 디렉토리
• src/assets :
  이미지, css, 폰트 등을 관리
• src/App.vue :
  최상위 컴포넌트
• src/main.js :
  가장 먼저 실행되는 자바스크립트 파일, vue 인스턴스를 생성하는 역할
• babel.config.js :
  바벨 설정 파일
• package-lock.json :
  설치된 package의 dependency 정보를 관리하는 파일
• package.json :
  프로젝트에 필요한 package를 정의하고 관리하는 파일