Vue 단일 파일 구성 요소 에 대한 자세 한 설명

본 고 는 Vue 단일 파일 구성 요 소 를 상세 하 게 소개 할 것 이다.
개술
많은 Vue 프로젝트 에서 Vue.coponent 를 사용 하여 전체 구성 요 소 를 정의 합 니 다.이 어 new Vue({el:'\container'})로 각 페이지 에 용기 요 소 를 지정 합 니 다.
이런 방식 은 많은 중 소 규모 프로젝트 에서 잘 작 동 되 는데,이 프로젝트 에서 자 바스 크 립 트 는 특정한 보 기 를 강화 하 는 데 만 사용 된다.그러나 더 복잡 한 프로젝트 나 전단 이 자바 스 크 립 트 로 구동 되 었 을 때 다음 과 같은 단점 이 뚜렷 해 집 니 다.
1.전역 정의(Global definitions)는 모든 component 의 이름 이 중복 되 지 않도록 강제 합 니 다.
2.문자열 템 플 릿(String templates)은 문법 적 하 이 라이트 가 부족 합 니 다.HTML 이 여러 줄 일 때 추 한\를 사용 해 야 합 니 다.
3.CSS(No CSS support)를 지원 하지 않 는 다 는 것 은 HTML 과 JavaScript 가 구성 요소 화 되 었 을 때 CSS 가 뚜렷하게 누락 되 었 음 을 의미 합 니 다.
4.빌 드 절차(No build step)가 없 으 면 HTML 과 ES5 JavaScript 만 사용 할 수 있 고 Pug(formerly Jade)와 Babel 같은 예비 프로 세 서 를 사용 할 수 없습니다.
파일 확장자 가.vue 인 single-file components(단일 파일 구성 요소)는 상기 모든 문제 에 해결 방법 을 제공 하고 웹 팩 이나 Browserify 등 구축 도 구 를 사용 할 수 있 습 니 다.
다음은 Hello.vue 라 는 파일 의 간단 한 인 스 턴 스 입 니 다.

단일 파일 조합 을 통 해 현재 획득:

1、      
2、CommonJS   
3、     CSS

또한 Pug,Babel(with ES 2015 modules),Stylus 등 사전 프로 세 서 를 사용 하여 간결 하고 기능 이 풍부 한 구성 요 소 를 구축 할 수 있 습 니 다.

이러한 특정한 언어 는 예 일 뿐 Babel,TypeScript,SCSS,PostCSS-또는 기타 생산력 향상 을 도 울 수 있 는 예비 프로 세 서 를 간단하게 사용 할 수 있 습 니 다.vue-loader 와 함께 Webpack 을 사용 하면 CSS Modules 를 제1 시민 으로 취급 합 니 다.
[관심 사 분리!]
중요 한 것 은 주목 할 만 한 것 이다.관심 사 분 리 는 파일 형식 분리 와 같 지 않다.현대 UI 개발 에 서 는 코드 라 이브 러 리 를 세 개의 큰 차원 으로 분리 하고 서로 교차 시 키 는 것 보다 느슨 한 결합 구성 요소 로 나 누 어 조합 하 는 것 이 합 리 적 이라는 것 을 발견 했다.하나의 구성 요소 에서 템 플 릿,논리 와 스타일 은 내부 적 으로 결합 되 고 이 를 조합 하면 실제 적 으로 구성 요 소 를 더욱 내부 적 이 고 유지 할 수 있 습 니 다.
단일 파일 구성 요 소 를 좋아 하지 않 더 라 도 자바 스 크 립 트,CSS 를 독립 된 파일 로 분리 한 다음 에 열 재 부팅 과 사전 컴 파일 을 할 수 있 습 니 다.

<!-- my-component.vue -->
<template>
 <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

시작 하 다
vue 구성 요소 가 있 으 면 고급 자 바스 크 립 트 응용 분야 에 들 어 갑 니 다.
웹 팩-simple 을 참고 하 는 것 이 좋 습 니 다.지 시 를 따 르 기만 하면.vue 구성 요소,ES 2015 와 핫 로드(hot-reloading)를 사용 하 는 Vue 프로젝트 를 빠르게 실행 할 수 있 습 니 다.이 템 플 릿 은 웹 팩 을 사용 합 니 다.여러 모듈 을 최종 응용 모듈 로 포장 할 수 있 는 패키지 도구 입 니 다.
웹 팩 에 서 는 각 모듈 이 bundle 로 포장 되 기 전에 해당 하 는"loader"로 전환 되 며,Vue 도 vue-loader 플러그 인 을 제공 하여.vue 단일 파일 구성 요소 의 변환 을 수행 합 니 다.이 웹 팩-simple 템 플 릿 은 이미 당신 을 위해 모든 것 을 준비 하 였 습 니 다.
웹 팩 이나 Browserify 를 더 좋아 하 든 간단 하거나 복잡 한 항목 은 문서 템 플 릿 을 참고 할 수 있 습 니 다.github.com/vuejs-templates 를 탐색 하고 필요 한 부분 을 찾 은 다음 README 의 설명 을 참고 하여 vue-cli 도 구 를 사용 하여 새 항목 을 생 성 합 니 다.
템 플 릿 에 Webpack 을 사용 합 니 다.하나의 모듈 로 더 를 불 러 와 서 최종 응용 으로 구축 합 니 다.
위 와 같은 Vue 단일 파일 구성 요 소 를 바탕 으로 상세 하 게 설명 하 는 것 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.