(Vue.js환경 만들기 2) Vue -cli 설치 및 프로젝트 생성

Vue -cli 여기서 CLI 란 ?

명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. Vue project 실행을 보면 더 쉽게 이해될것

 

그렇다면 vue-cli 는 기본 vue 개발 환경을 설정해주는 도구라고 볼 수 있다.

 

 

1. vue-cli 설치

---

Node.js 환경변수 설정까지 마치고 이제 vue -cli를 설치한다

vue는 현재 2가지 버전에 대한 설치를 제공한다. 2.x와 3.x 버전이 있는데 

2.x 버전이 안정화 되어있고 많이 사용한다고 한다. 따라서 2.x 버전 설치!

• ver 2.x : npm install vue-cli -global
• ver 3.x : npm install @vue/cli -global

 

설치가 완료됐으면 vue -V 명령어를 통해 버전확인이 가능하고 

vue라고 입력하면 관련 command 리스트를 보여준다

vue 입력시 나오는 command 리스트

 

 

 

 

2. Vue project 생성 (연습 / not springboot)

---

이제 vue -cli 설치를 완료했으니 프로젝트를 한번 만들어보자

위 커맨드 사진에서 볼 수 있듯 vue init 명령어로 간단하게 프로젝트를 생성할수 있다

 

vue init을 입력했더니..

vue init template-name과 project-name 형식으로 입력해야 한다.

여기서 template는? 

 

[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 설정만 가짐

 

 

webpack으로 vue init을 해보자. [ vue init webpack 플젝이름 ]

이제 다음과 같은 질문들이 나올 것이다.

 

 

? Project name      <프로젝트 이름>
? Project description     <프로젝트 설명>
? Author    <프로젝트 제작자>
? Vue build standalone     
? Install vue-router? Yes     <vue-router를 사용할지... 이는 SPA로 view를 개발할때 필수요소 입니다.>
? Use ESLint to lint your code? Yes    <코드작성 규칙을 ESLint로 사용할 것인지... 이게 또 제약이 심하지만...>
? Pick an ESLint preset Airbnb     <2가지 preset을 선택이 가능한데... 저는 Airbnb를 추천합니다.>
? Set up unit tests Yes     <단위테스트 환경 여부>
? Pick a test runner jest     <부하테스트를 위한 종류 선정>
? Setup e2e tests with Nightwatch? Yes     <e2e테스트 여부>
? Should we run `npm install` for you after the project has been created? (recommended) NPM <의존성 설치여부>

 

한 두개 질문을 잘못 입력해서.. 무튼 프로젝트 생성을 완료했다.

아래를 보면 프로젝트를 구성하는 파일들이 설치된 것을 볼수있다.

 

 

 

3. Vue project 실행

---

실행은 더 간단하다. cmd 에서 해당 프로젝트의 경로로 들어가서 npm run 이라고 입력하자

가능한 모드가 나오고 이번엔 dev를 실행한다. node에서 제공하는 자체 서버를 통해서 구동이 되게 된다.

(cmd창의 경로를 꼭 확인하고 실행하자)

 

npm run dev를 실행한 화면이다.

위 url주소로 들어가서 다음과 같은 화면이 나오면 성공!

 

 

 

[많이 참고한 블로그 : https://ayoteralab.tistory.com/83]