단일 파일 컴포넌트

소개

많은 Vue 프로젝트에서, 전역 컴포넌트는 Vue.component를 사용해 정의되고, 다음에 모든 페이지의 container 엘리먼트를 대상으로 하는 new Vue({el: '#container'})가 정의됩니다.

이것은 특정 뷰를 향상시키는 용도로만 사용되는 중소 규모 프로젝트에서 유용합니다. 하지만 좀 더 복잡한 프로젝트의 경우 또는 프론트엔드가 JavaScript 기반인 경우 단점이 분명해집니다.

위 모든 것들은 Webpack 또는 Browserify와 같은 빌드 도구를 이용해 .vue 확장자를 가진 단일 파일 컴포넌트 로 해결 됩니다.

다음은 Hello.vue 파일의 간단한 예입니다.

이제 우리는 할 수 있습니다:

약속대로 Jade, Babel (ES2015 모듈을 포함합니다), Stylus와 같은 전처리기를 사용해 더 깨끗하고 기능이 풍부한 컴포넌트를 사용할 수 있습니다.

이러한 특정 언어는 예제일 뿐입니다. Bublé, TypeScript, SCSS, PostCSS 또는 생산성 향상에 도움을 주는 다른 전처리기를 쉽게 사용할 수 있습니다. Webpack을 vue-loader와 함께 사용하면 CSS 모듈에 대한 1등급 클래스를 지원합니다.

관심사의 분리는 무엇입니까?

주목해야 할 중요한 점은 관심사 분리가 파일 유형의 분리와 동일하지 않다는 점입니다. 현대적인 UI 개발에서 코드베이스를 서로 얽혀있는 세 개의 거대한 레이어로 나누는 대신, 느슨하게 결합 된 컴포넌트로 나누고 구성하는 것이 더 중요합니다. 컴포넌트 내부에서 템플릿, 로직 및 스타일이 본질적으로 결합되어 배치되면 컴포넌트의 응집력과 유지 보수성이 향상됩니다.

단일 파일 컴포넌트에 대한 아이디어가 마음에 들지 않더라도 JavaScript와 CSS를 별도의 파일로 분리하여 핫 리로드 및 사전 컴파일 기능을 활용할 수 있습니다.

<!-- my-component.vue -->
<template>
<div>이 곳은 사전에 컴파일 됩니다.</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

시작하기

예제 샌드박스

지금 당장 싱글 파일 컴포넌트를 사용하고 싶다면 CodeSandbox의 단순한 할일 앱을 확인하세요.

JavaScript에서 모듈 빌드 시스템을 처음 사용하는 사용자를 위한 내용

.vue 컴포넌트로, 우리는 진보한 JavaScript 영역에 들어서고 있습니다. 약간의 아직 배우지 않은 추가 도구 사용방법을 배워야 합니다.

위 내용을 얻으려면 하루정도 걸립니다. 이 후에 webpack-simple 을 확인하는 것을 추천합니다. 설명을 따라 가면 .vue 컴포넌트, ES2015 및 핫 리로드가 포함된 Vue 프로젝트를 즉시 사용할 수 있게 됩니다.

템플릿은 여러 “모듈”을 가져와 최종 응용프로그램에 묶는 모듈 번들러인 Webpack을 사용합니다. Webpack 자체에 대한 자세한 내용을 보려면 이 동영상에서 좋은 소개를 볼 수 있습니다. 일단 기본을 익히면 Egghead.io의 고급 Webpack 코스Webpack Academy를 확인하십시오.

Webpack에서 각 모듈은 번들에 포함되기 전에 “loader”에 의해 변형될 수 있으며 Vue는 vue-loader 플러그인을 제공하여 .vue 단일 파일 컴포넌트를 처리합니다. webpack-simple 템플릿은 이미 모든 것을 설정 되어 있지만 .vue 컴포넌트 작동 방식을 알고 싶다면 vue-loader 문서를 읽으시면 됩니다.

고급 사용자를 위한 내용

Webpack 또는 Browserify 중 어느 것을 선호하든, 우리는 단순하거나 복잡한 프로젝트를 위한 템플릿을 문서화했습니다. github.com/vuejs-templates에서 원하는 템플릿을 선택한 다음 README의 지침에 따라 vue- cli 새 프로젝트를 시작하세요.