뷰 프로젝트 구성방법

싱글 파일 컴포넌트 체계

• 기존에 쓰던 방식은 오류를 찾기 힘들고 가독성이 매우 떨어지기 때문에 나온 방법
• .vue 파일로 프로젝트를 구성하는 방식
• 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일

HTML

SCRIPT

CSS

뷰 CLI

• .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해주는 도구-웹팩-
• 웹팩은 웹 앱의 자원(HTML,CSS,이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹성능을 향상시켜주는
  자바스크립트 모듈 번들러이다.
  -모듈 번들러: 서로 의존 관계가 있는 모듈을 하나의 파일로 묶어 주는 도구-
• VUE는 프로젝트를 구성할 수 있도록 CLI 도구를 제공한다.-노드제이에스가 필수-

*설치

• cmd창에 해당 명령어를 입력한다.

설치 명령어

• 설치가 정상적으로 완료되면 해당 명령어가 보인다.

 

뷰 CLI명령어

• 시작시 사용하는 명령어는 vue init이다 .
• vue init을 할때 사용하는 템플릿 종류는 6가지이다.

vue init webpack	고급 웹팩 기능 -테스팅 문법 검사 등 지원
vue init webpack-simple	웹팩 최소 기능 -빠른 화면 프로토타이밍전용
vue init browserify	고급 브라우저리파이 기능 -테스팅 문법 검사 등 지원
vue init browserify-simple	브라우저리파이 최소 기능 - 빠른 화면 프로토타이핑용
vue init simple	최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa	웹팩 기반의 프로그레시브 웹 앱-PWA- 기능을 지원하는 뷰 프로젝트

• 위의 템플릿 6개는 크게 .vue파일을 javascript로 바꿔주는 뷰 로더 기능과 모듈 번들러 기능을 가지고 있다 .

뷰 CLI로 프로젝트 생성

• 뷰 프로젝트를 생성할 빈 폴더 생성
• 빈 폴더에서 CMD를 키고 vue init webpack-simple 입력
• 상세정보 입력

상세정보 입력

*sass는 확장된 css언어이다.

• 현재 cmd에서 npm install을 눌러 필요한 라이브러리를 받아온다.
• 설치가 완료되면 지정한 폴더에 파일들이 생성된다.

생성된 파일

*package.json 파일

• 프로젝트 정보를 담고 있는 설정 파일 
• npm 명령어 및 뷰로 애플리케이션을 제작하는데 필요한 라이브러리 정보들을 포함
• npm install 명령어를 실행하면 package.json의 라이브러리 목록이 전부 프로젝트의 node_modules 폴더 밑에 설치된다.

• npm run dev 실행하면 index.html 파일이 실행된다.

뷰 로더

• 웹 팩에서 지원하는 라이브러리 
• .vue파일을 브라우저에서 실행 가능한 웹 페이지의 형태로 변환해줌