[VueJS] Vue-Cli로 개발하기 - 1.셋팅 및 환경

 

 

 

 

 

 

 

 

 

 

 

1. 설치요건 

NodeJS 10.0(6.x 이상 추천)

Npm 3.0

 

2. 설치

$npm install -g vue-cli

3. 프로젝트 생성

// vue init <template-name> <project-name>
$vue init webpack project

template-name : 셋팅할 템플릿명 vuejs-templates 에서 확인 가능

project-name : 자신의 생성할 프로젝트명

 

4. 생성시 설정

프로젝트 생성시 몇가지 입력을 진행함

- Project name? 생성할 프로젝트명

- Project description? 프로젝트 설명

- Vue build? 빌드방식

   - Runtime + Compiler : 실시간 방식 과 컴파일 방식 둘다 사용

   - Runtime-only : 실시간 방식 사용

Vue build?

- Install vue-router?  vue-router 설치 여부 vue-router 

- Use ESLint to lint your code? ESLint 사용 여부 ESLint 

- SET up unit tests? 단위 test 환경을 셋팅 할지 여부

- Pick a test runner? 단위 테스트 환경 셋팅 선택

   - Jest

   - Karma and Mocha

   - none ( configure it yourself )

Pick a test runner?

- Setup e2e tests with Nightwatch? E2E(End-to-End) 테스트 환경으로 Nightwatch 를 설치 할지 여부

- Should we run `npm install` for you after the project has been created? (recommended) 이후 해당 프로젝트내에서 모듈 설치시 사용할 명령어 선택

   - Yes, use NPM

   - Yes, use Yarn

   - No, I will handle that myself

 

설치진행 과정

 

5. 설치완료

설치 완료후 폴더트리

 

6. 실행

   - vueCli 실행  

      - config/ 에 설정된 옵션에 따라서 cli 로 실행

#npm run dev

 

  - webpack build 

     - dist 폴더에 모든 js,css html , image 등을 build 해서 저장

     - dist를 별도의 아파치/톱캣 등의 WAS 프로그램으로 서비스 실행

#npm run build