[Vue] Vue-cli2 프로젝트 생성 및 실행

 

Vue-cli2 프로젝트 생성 방법

1. 프로젝트 생성

프로젝트가 생성되었으면 좋겠는 폴더 위치로 이동하여 아래와 같은 명령어를 입력하시면 됩니다.

이때, VSCode 터미널 창에서는 vue가 아닌 vue.cmd로 명령어를 입력하시면 됩니다.

 

- cmd창 : vue init

- VSCode 터미널창 : vue.cmd init

template-name과 project-name을 입력하라고 알려줍니다. template은 vue에서 기본적으로 5가지를 제공합니다. 5가지에 대해 알아봅시다.

 

[template 종류]

• webpack : 모듈번들러를 hot-reload, linting, test, CSS추출 기능 등 대부분의 기능을 갖추고 있는 webpack으로 사용하고, vue-loader를 포함하는 template
• webpack-simple : 단순히 webpack과 vue-loader를 포함하는 template. 간단히 프로토 타입을 만들 때 사용
• browserify : 모듈번들러를 hot-reload, linting, test, CSS추출 기능 등 대부분의 기능을 갖추고 있는 browserify로 사용하고 vuetify를 포함하는 template
• browserify-simple : 단순히 browserify와 vuetify를 포함하는 template. 간단히 프로토 타입을 만들 때 사용
• simple : 가장단순하게 html 파일에 vue 설정만 가짐

Vue Loader (뷰로더) : vue로 생성된 파일을 HTML, CSS, JS 파일로 변환해주는 모듈
Module Bundler (모듈번들러) : HTML, CSS, 이미지를 JS모듈로 변환해주는 번들러

 

저희는 가장 많이 쓰는 'webpack'을 사용하여 'init-demo'라는 이름의 프로젝트를 만들어봅시다. 

(init-demo 외에 다른 이름으로 프로젝트를 만드셔도 됩니다.)

 

- cmd창 : vue init webpack init-demo

- VSCode 터미널창 : vue.cmd init webpack init-demo

 

위 명령어를 입력하면 아래와 같이 많은 질문들이 나타난다.

? Project name  <프로젝트 이름>

? Project description (A Vue.js project)  <프로젝트 설명>

? Author <프로젝트 주인>

? Vue build (Use arrow keys) <Vue Build - Runtime+Compiler로 선택>
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are 
required elsewhere

? Install vue-router? (Y/n) <Vue Router 사용여부 - SPA로 개발 시 필수>

? Use ESLint to lint your code? (Y/n) <ESLint 사용여부 - Y 선택>

? Pick an ESLint preset (Use arrow keys) <ESLint의 종류 고르기 - Standard로 선택>
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)

? Set up unit tests (Y/n) <단위테스트 환경 여부 - n 선택>

? Setup e2e tests with Nightwatch?  (Y/n)  <e2e 테스트 여부 - n 선택>

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  <의존성 설치여부 - npm 선택>
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

 

로딩이 끝나면 프로젝트를 만들어 준 위치로 가보았을 때 생성 완료된 모습을 확인할 수 있습니다.

 

2. Vue 실행

VSCode로 해당 프로젝트 폴더로 열어줍니다. 터미널 창에서 'npm run dev'를 입력합니다.

http://localhost:8080/로 열었을 때 Vue가 정상적으로 실행하는 것을 알 수 있습니다.

(다음 시간에 localhost 포트 번호를 바꾸는 방법에 대해 올려두겠습니다.)

 

위랑 다른 방법으로 Vue 실행하기

VSCode에서 프로젝트 폴더나 outline부분(빨간색 선 사각형)에 우클릭하면 작은 창이 뜹니다. 해당 창에서 NPM Script를 클릭하면 NPM Script가 왼쪽 탭에 생깁니다.

'dev' 옆에 마우스를 가져다 놓으면 디버그와 화살표 아이콘이 생깁니다. 이때, 화살표 아이콘을 클릭하면 'npm run dev'명령어를 자동으로 실행합니다.

여기까지 Vue-cli2 프로젝트 생성 및 실행까지 완료하였습니다.