여러 개의 단일 파일 구성 요소 및 Vue Webpack 템플릿

Question

https://github.com/vuejs-templates/webpack을 사용하여 간단한 Vue 사이트를 설정했습니다. 이 템플릿은 단일 파일 구성 요소 (App.vue)와 함께 제공됩니다. 여러 단일 파일 구성 요소로 사이트를 구축하는 방법을 알아 내려고 노력하고 있습니까?

예를 들어, 네 개의 단일 파일 구성 요소가있는 웹 페이지 : 테이블 데이터를 정렬하고 페이지 매김 할 수있는 테이블 구성 요소, 테이블 데이터를 필터링하는 필터 구성 요소, 숫자가있는 버튼 구성 요소 new/edit/delete와 같은 버튼과 드롭 다운이있는 헤더 구성 요소는 선택 될 때 사용 가능한 필터와 테이블의 데이터를 교체합니다.

나는 4 개의 .vue 페이지 (Table.vue, Filter.vue, Button.vue 및 Header.vue)를 만들 것이라고 가정하지만 동일한 페이지에 모두 포함시키는 방법을 분명히 밝히지 않았습니다. App.vue를 다른 네 개의 단일 파일 구성 요소를 담는 컨테이너로 사용한다고 가정합니다. 그러나 다른 네 개의 .vue 페이지를 App 단일 파일 구성 요소에 포함시키는 방법을 모르겠습니다. main.js에서 그들에 대한 참조가 있어야합니까? 그런 다음

import MyTable from 'path/to/Table' 
import MyFilter from 'path/to/Filter' 
import MyButton from 'path/to/Button' 
import MyHeader from 'path/to/Header' 

export default { 
    components: { MyTable, MyFilter, MyButton, MyHeader }, 
} 

, 상위 요소의 템플릿에 자신의 태그를 사용할 수 있습니다 :

Answer 1

당신이 그들을 사용하고 상위 구성 요소의 components 속성을 등록하는 중 상위 구성 요소 정의로 가져 오기

<my-table></my-table> 
<my-filter></my-filter> 
<my-button></my-button> 
<my-header></my-header> 

---

또는, main.js에서 세계를 등록 할 수 있습니다 :

import Table from 'path/to/Table' 

Vue.component('my-table', Table); 

이렇게하면 모든 구성 요소에 <my-table> 태그를 사용할 수 있으며 해당 구성 요소에 등록하지 않아도됩니다.