단일 파일 컴포넌트

소개

많은 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>

시작하기

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

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

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

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

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

고급 사용자를 위한 내용

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