Vue JS

4.Vue JS 환경 설정하기

Clasha 2020. 3. 21. 16:42

나머지 디렉티브를 공부하기 전에 Vue JS 환경실정을 해보겠다.

설치하기 전에 먼저 node js와 npm의 버전을 확인하자.

버전을 확인했으면 이제 설치를 시작해보자

아래 명령어를 입력해주자.

$ npm install vue-cli -g

 

설치하고 나면 vue-cli로 프로젝트를 생성하고 초기설정을 자동으로 설정할 수 있다

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

이러한 형식으로 프로젝트를 생성할 수 있는데 template-name에는 몇가지 방법들이 있다.

여기에서는 2가지 설정방법을 알려주겠다. (webpack관련으로 진행하는게 가장 평범하고 가장 많이 사용되기 때문에 webpack관련 2가지만 설명하겠다)

 

webpack-simple template

$ vue init webpack-simple vue-example-project

이렇게 입력하면 몇가지 선택지가 출력된다

 

# 프로젝트 이름 ?
Project name (vue-example-project): 
# 프로젝트 설명 ?
Project description (A Vue.js project): 
# 작성자 ? 
Author (Clasha<dnjsehfud88@gmail.com>): 
# sass 사용여부 ? 
Use sass? (Y/n)

질문시 괄호 안에 있는 내용은 그냥 엔터쳤을 때 반영될 내용이다. 특별히 바꿀 것이 없다면 엔터를 쳐주자

프로젝트가 잘 만들어지고 나면 다음 어떤 행동을 해야하는지까지 잘 설명해주고 있다.

 

  • cd vue-example-project (해당 프로젝트 폴더로 이동)
  • npm install (해당 명령어를 통해 관련 의존성 모듈 설치.)
  • npm run dev (명령어를 실행하면 현재 개발되고 있는 프로젝트를 가동하며, 브라우저에 띄워준다)

 

해당 폴더로 들어가면 각 파일과 폴더들이 있는 것을 볼 수 있는데, 간단하게 설명하도록 하겠다.

index.html 
Vuejs HTML 시작페이지, 개발완료 후 배포시 `index.html`도 같이 배포. 

package.json 
npm 의존성 모듈목록 및 프로젝트 기본설정들이 표기되어 있다. 
그리고 개발모드로 실행하는 것과 배포를 할 수 있는 명령어들이 정의되어 있다. 

src  
`Vuejs` 코드들이 있는 폴더. 실제 이 곳에서 개발을 진행하게 된다. 

webpack.config.js 
개발을 완료하고나면 여러파일들이 있는데, 그 것을 하나로 묶어주고 관리해주는 `webpack`의 설정파일.

 

 /src 폴더

assets 
이미지나 css등 공통으로 `Vuejs`에서 요청하고 관리될 파일들이 있는 곳이다. 

App.vue 
여기는 `Vuejs` 최상위 컴포넌트라고 생각하면 되고, 
여기에서 본격적으로 `Vuejs`로 개발한다고 생각하시면 된다. 

main.js 
여기가 Vue 인스턴스를 새로 만들고 시작하는 부분이다. 
전역으로 처리해야할 일이 있으면 이 곳에서 진행하면 된다.

그리고 개발완료 후에 npm run build를 하게 되면 배포파일이 생성되는데 이 때 /dist라는 폴더가 생성되고 그 안에 파일들이 생긴다. index.html과 /dist를 복사하여 실제 운영하려고 하는 공간에 복사해서 사용한다

 

webpack template

다음은 정말 자주 사용될 템플릿모드다.

$ vue init webpack vue-example-project

템플릿만 webpack으로 지정하여 프로젝트를 생성한다. webpack-simple에 비해 물어보는 것도 많고 설치되는 것도 많이 있다.

 

webpack-simple에서는 없었던 질문들만 설명하겠다.

# Vue 빌드 선택 
Vue build 

# 두개 중에서 선택할 수 있으며, 기본선택은 Runtime + Compiler다. 

# 대부분의 사용자에게 권장하는 방식. 
- Runtime + Compiler: recommended for most users 

# 6KB의 가벼운 min+gzip으로 이루어져 있는 런타임전용이다. 템플릿은 .vue에서만 허용하고 있다. 
- 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 

# vue-router사용여부 (사용하면 자동으로 설정해준다) 
Install vue-router? (Y/n) 

# ESLint 적용여부 (사용하면 코드작성 스타일을 강제화 한다) 
Use ESLint to lint your code? (Y/n) 

# ESLint 적용하면 나오는 질문으로 어떤 스타일을 사용할 것인지 물어본다. 
Pick an ESLint preset 

# 3개의 선택지가 나오며 기본은 Standard로 되어 있다. 
- Standard (https://github.com/feross/standard) 
- Airbnb (https://github.com/airbnb/javascript) 
- none (configure it yourself) 

# 유닛테스트 Karma, Mocha 적용 여부 
Setup unit tests with Karma + Mocha? (Y/n) 

# Nightwatch 적용 여부 (UI테스트 툴) 
Setup e2e tests with Nightwatch? (Y/n)

 

설치하고 나면 역시 폴더로 들어가서 npm 모듈들을 설치하고 실행해주면 된다.

build 
배포시 관련 설정들이 들어있는 폴더. 

config 
webpack관련 설정들이 포함되어 있는 폴더

package.json 
npm 의존성 모듈 목록들과 개발/테스트/배포할 수 있는 명령어들이 포함되어 있다. 

src 
여기에서 Vuejs로 개발을 진행할 수 있으며
vue-router까지 이미 설정되어 있는 것을 확인할 수 있다. 

static 
Vuejs와 관련없이 정말 공통으로 사용해야할 정적파일들을 이 곳에 보관할 수 있다. 

test 
개발하면서 유닛테스트를 진행할 수 있도록 준비되어 있는 test 폴더다.

# 빌드 후 생성되는 폴더 
dist 
빌드를 완료하게 되면 dist폴더에 모든 파일과 index.html까지 포함되어 있다. 
이 폴더 안에 있는 모든파일을 배포공간에 넣어두면 서비스를 운영할 수 있다.

 

서버 실행

콘솔에서 해당 프로젝트 위치로 이동하고

아래 명령어를 입력해주자.

$npm run dev

 

그리고 http://localhost:8080에 접속해보자.

아래처럼 화면이 나오면 된다.

그러면 설정은 여기까지 하겠다.