Vue: 단일 파일 구성 요소 - 학습 노트

많은 Vue 프로젝트에서 우리는 Vue.component 를 사용하여 전역 구성 요소를 정의하고, 이어서 new Vue({ el: '#container '}) 페이지마다 용기 요소를 지정합니다.
이런 방식은 많은 중소규모 프로젝트에서 잘 작동하는데 이런 프로젝트에서 자바스크립트는 특정한 보기를 강화하는 데만 사용된다.그러나 더 복잡한 항목이나 JavaScript의 앞부분이 완전히 JavaScript에 의해 구동될 때 다음과 같은 단점이 뚜렷해집니다.

글로벌 정의(Global definitions)는 각component의 이름을 중복해서는 안 된다고 강제한다

문자열 템플릿(String templates)은 문법이 밝지 않아 HTML에 여러 줄이 있을 때 못생긴 \

를 사용해야 한다.

CSS가 지원되지 않음(No CSS support)은 HTML과 JavaScript가 구성 요소화될 때 CSS가 뚜렷하게 누락됨을 의미합니다

구축 단계 없음(No build step) HTML 및 ES5 JavaScript만 사용할 수 있고 Pug(formerly Jade) 및 Babel

등의 사전 프로세서는 사용할 수 없습니다.
파일 확장자.vue인single-file components(단일 파일 구성 요소)는 상기 모든 문제에 대한 해결 방법을 제공하고 웹 패키지나 Browserify 등 구축 도구를 사용할 수 있습니다.
——————————————————————————————————————————————
단일 파일 구성 요소를 사용하려면 프로젝트에 다음 종속을 설치해야 합니다.
① npm 설치: npm 전체 이름은 Node Package Manager이고 Node 기반입니다.js의 패키지 관리자이자 전체 Node입니다.js 커뮤니티에서 가장 유행하고 지원하는 제3자 모듈이 가장 많은 패키지 관리자:

npm -v