Single File Component
Single File Components 체계는 .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다. 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다.
<!-- 화면에 표시할 요소들을 정의하는 영역 -->
<template>
<!-- HTML 태그 내용 -->
</template><!-- 뷰 컴포넌트의 내용을 정의하는 영역 -->
<script>
exports default{
// 자바 스크립트 내용
}
</script><!-- template에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역 -->
<style>
/* CSS 스타일 내용 */
</style>Vue CLI
Single File Component 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해주는 웹팩(webpack)이나 Browserify와 같은 도구가 필요하다. 웹팩은 웹 앱의 자원(HTML, CSS, 이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러이다. 뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface) 도구를 제공한다.
시작하기
여기서 default를 선택하여 생성하게 되면 babel과 eslint가 설치된다. Manually select features를 선택하게 되면 아래와 같이 vuex, vue-router 등 몇가지를 더 선택할 수 있다.
프로젝트를 하다가 추가적으로 plugin을 설치하고 싶은 경우에는 add를 통해 할 수 있다.
default 모드를 선택해 설치하게되면 다음과 같은 구조로 프로젝트가 생성된다.
컴포넌트 같은 경우에는 src/components 폴더에서 관리한다. 애플리케이션 규모가 커져서 기능별로 관리를 해야하는 경우에는 components/기능/<컴포넌트명>.vue (components/login/LoginForm.vue)와 같은 형식으로 관리하는 것이 좋다.
예를 들어서 axios 플러그인을 설치해볼것이다.
axios 플러그인이 설치되고 난 후 수정된 파일과 새로 추가된 파일을 확인할 수 있다.
웹팩 설정 파일
vue-cli 3.x 에서는 웹팩 설정파일을 노출하지 않는다. 3.x에서는 설정을 추가하기 위해서는 root 디렉토리에 vue.config.js 파일을 설정하고 내용을 작성해준다.
vue ui
Vue-CLI3 UI를 통해서 프로젝트를 관리할 수 있다.
위와 같이 실행하면 프로젝트 매니저가 localhost:8000으로 브라우저를 실행시킨다. 이 프로젝트 매니저 위에 프로젝트를 생성할 수 있으며, 이미 생성된 프로젝트를 불러와서 관리 포인트로 둘 수 있다.
프로젝트 실행
build
상용 배포를 위한 빌드를 진행할 수 있다.
빌드를 실행하면 Vue CLI가 웹팩을 통해 프로젝트의 모든 소스 파일들을 번들링하여 dist 디렉토리에 넣어준다. dist 디렉토리를 확인해보면 웹팩이 번들링한 파일들을 확인할 수 있다. 이 파일들은 상용 배포에 적합하도록 웹팩이 최적화 해놓은 것이다.
참조
Last updated
Was this helpful?