[Vue.js] Vue 프로젝트 구성방법 및 구조

프로젝트 구성을 세팅하기전에. 개념정리

싱글파일 컴포넌트

- .vue파일로 프로젝트 구조를 구성하는 방식.

- .vue파일 1개는 1개의 컴포넌트와 동일하다.

- 싱글파일 컴포넌트 체계를 사용하려면  .vue파일을  웹브라우저가 인식 할 수 있는 형태의 파일로 변환해주는 

   웹팩 or 브라우저리파이가 필요하다

뷰CLI(커맨드 라인 인터페이스)

- 커맨드창에서 명렁어로 특정 동작을 수행 할 수 있는 도구

웹팩

- html, css,이미지들을 자바스크립트 모듈로 변환해서 하나로 묶어 웹성능을 향상시켜 주는 

  자바스크립트 모듈 번들러임.

웹팩과 브라우저리파이는 유사하지만 , 브라우저리파이는 웹자원 압축, 빌드자동화 기능이 없다.

아래 내용 총 요약 Simple is Best...

1. vue CLI 설치

npm install vue-cli -global

2. vue 프로젝트 템플릿 생성

vue init webpack-simple

3. 관련 라이브러리 설치

npm install

4. 서버구동

npm run dev

뷰 CLI 설치법

- cmd창 열고 npm install vue-cli -global입력.

 그리고 vue를 입력한다. 아래와 같은 화면이 나오면 정상적으로 설치됬다는 것.

vue개발을 시작할때 초기세팅을 쉽게 구성해주는 명령어는

vue init이다.

그리고 프로젝트 템플릿은 아래 종류가 있다.

템플릿 종류

종류	설명
vue init webpack	고급웹팩 기능을 활용한 프로젝트 구성방식 / 테스팅, 문법검사등 지원함
vue init webpack-simple	웹팩 최소기능을 활용한 프로젝트 구성방식 / 빠른화면, 프로토타이핑용
vue init browserify	고급 브라우저리파이 기능을 활용한 프로젝트 구성방식 / 테스팅, 문법검사등 지원함
vue init browserify-simple	브라우저리파이 최소기능을 활용한 프로젝트 구성방식 / 빠른화면, 프로토타이핑용
vue init simple	최소 뷰기능만 들어간 html파일 1개 생성
vue init pwa	웹팩 기반의 프로그레시브 웹앱기능을 지원하는 뷰 프로젝트

템플릿 구성 특징

- 모듈번들러(웹팩, 브라우저리파이)가 프로젝트 자체에 포함되어 있음.

- .vue파일을  html,css,js로 변환해주기 위한 뷰로더를 포함하고 있음

이중에서 webpack-simple을 선택하자 

왜냐하면 기본 webpack은 프로젝트 구성방식 파악하는대도 오래걸리고, 문법 검사가 까다로워 빠르게 구현하기가 어려움

뷰 CLI로 프로젝트를 생성하는 법

cmd창에서 아래 명렁어 실행.

vue init webpack-simple

기본 정보를을 쭉입력하고 마지막에 sass라는건 확장된 CSS를 설치할꺼냐? 라고묻는건대 굳이 필요없기때문에 N으로 한다

vue 에플리케이션구동을 위해 관련 라이브러리를 모두 다운로드 한다.

npm install

설치완료후 Atom을 통해서 프로젝트를 열어보자

vue 프로젝트의 구조

로컬서버 띄우기

cmd창에서 아래 명령어 입력

npm run dev

vue 어플리케이션이 http://localhost:8080/로 기동됬으며,

웹팩 결과값(output)이 /dist/에서 제공되고 있다고 나온다.

Vue로더

- 웹팩에서 지원하는 라이브러리로 , .vue파일의 내용을 브라우저에서 실행가능한 웹페이지 형태로 변환해주는 역할을 함.

웹팩설정파일인 webpack.config.js를 보자

webpack.config.js 파일

module과 rules는 웹팩의 로더를 설정하는 속성이다.

여기서 주의깊게 볼 것은  test, loader속성이다.

위 코드는 프로젝트 폴더 내에서 .vue확장자를 가진 파일을 모두 선택하여 vue로더를 적용한다.