我使用https://github.com/vuejs-templates/webpack 建立了一个简单的 Vue 站点。这个模板带有一个单一的文件组件（App.vue）。我想弄清楚如何构建一个包含多个单文件组件的网站？
例如，假设我有一个网页，上面有四个单个文件组件：一个可以对表格数据进行排序和分页的表格组件，一个过滤表格数据的过滤器组件，一个包含多个像新/编辑/删除的按钮，以及一个标题组件，其中包含选项后，选定在表中交换可用过滤器和表中的数据时。
我假设我会创建四个 .vue 页面（Table.vue、Filter.vue、Button.vue 和 Header.vue），但我不确定如何将它们全部包含在同一页面上。我假设我会使用 App.vue 作为其他四个单文件组件的容器，但我不确定如何将其他四个 .vue 页面包含到 App 单文件组件中。 main.js 中应该有对它们的引用吗？
【问题讨论】：
标签： vue.js
将它们导入到您使用它们的任何父组件定义中，并将它们注册到父组件的components 属性中：
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 },
}
然后，您可以在父组件的模板中使用它们的标签：
<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> 标签，而无需将其注册到该组件。
【讨论】：