Vue CLI 프로젝트

doit! vue.js 입문 책을 보며 학습한 내용을 간략히 정리하였습니다.

싱글 파일 컴포넌트

.vue 파일로 프로젝트 구조를 구성한 방식을 말합니다. .vue로 구성한 파일은 하나의 컴포넌트의 기능을 하게 되며 .vue 파일은 아래와 같은 구조를 가지게 됩니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
<!-- html 태그 (화면 표시 요소 정의, vue data binding)-->
</template>
<script>
  export default{
   // javaScript 영역 (template, data, methods) 
  }
</script>
<style>
  /* html 태그의 스타일 정의*/
</style>

Vue CLI

싱글 파일 컴포넌트 체계를 사용하려면 .vue 파일을 웹 브라우저가 인식할 수 있도록 파일변환 처리를 도와주는 웹팩이 필요합니다. 웹팩은 html, css등 자바스크립트 모듈로 변환하여 하나로 묶어 웹 성능을 향상시켜주는 자바스크립트 모듈 번들러 역할을 합니다. vue에서도 이러한 기능을 제공하며 이를 Vue CLI라 부릅니다. CLI는 커맨드 환경에서 명령어로 동작을 수행하는 도구이며 이를 통해 vue 프로젝트를 쉽게 구성 가능합니다.

템플릿 종류 설명
vue init webpack 고급 웹팩 기능을 활용한 구성, 테스트, 문법 검사 지원
vue init webpack-simple 웹팩의 최소 기능을 활용한 구성, 빠른 화명 프로토타입용
vue init browserify 고급 브라우저리파이 기능을 활용한 프로젝트 구성, 테스트, 문법검사
vue init browserify-simple 최소 브라우저리파이 기능을 활용한 프로젝트 구성, 빠른 프로토타입용
vue init simple 최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa 웹팩 기반의 PWA 기능을 지원하는 vue 프로젝트

Vue webpack-simple Project

생성 폴더 구조

  • node_modules : 라이브러리 위치
  • src : .vue 파일을 포함한 애플리케이션이 동작하는 로직의 위치
  • index.html : 뷰로 만든 프로젝트의 시작페이지
  • package.json : 뷰 애플리케이션 동작시 필요한 라이브러리 정의
  • webpack.config.js : 웹팩 설정파일, 빌드를 위한 로직 정의

스크린샷 2019-06-27 오후 4 34 48

커맨드 환경에서 vue init 명령어를 입력시 package.json 파일이 생성되고 이는 프로젝트 설정 정보를 가지고 있고 npm 명령어 및 뷰 애플리케이션이 가동하는데 필요한 라이브러리 정보를 포함하고 있습니다.(spring의 pom.xml과 비슷한 역할) 또한 npm install 명령어를 입력하면 package.json에 선언된 라이브러리 목록이 프로젝트의 node.modules에 설치가 되며 웹팩을 비롯한 바벨, 로더, 웹팩 dev server 라이브러리와 뷰를 구현하기 위한 코어 라이브러리등이 설치가 됩니다.

Vue Loader

웹팩에서 지원하는 라이브러리로 싱글 파일 컴포넌트 환경에서 .vue 파일의 내용을 브라우저에게 실행 가능하도록 웹페이지의 형태로 변환해주는 기능을 합니다. 즉 src 폴더내에 .vue파일의 내용은 뷰 로더의 변환 작업을 통해 웹페이지에 보여지게 됩니다.

순서

  • Vue CLI 설치

    • npm i vue-cli -g
  • 프로젝트 생성

    • vue init webpack-simple
  • 라이브러리 설치

    • npm install
  • 프로젝트 구동

    • npm run dev


Reference