一般而言，我们在导入子组件，通常会在组件里 使用 import 方式导入

import SupplyListSelect from '../../supply/parts/SupplyListSelect.vue';

在componets 导入 组件 

components   : {
    appSupplyListSelect: SupplyListSelect,
},

在 html 部份写入（pug）

app-supply-list-select(
slot="listSelect"
)

正常为这样的写法，可常我们程式写大的时候，这样其实并不好维护，我们希望能够在 Js 统一管理所有 componet ，并非分散管理componet

此时的写法，就不要这样写了

建立 resources/assets/js/components/components.js

在 resources/assets/js/app.js 里

import Components from './components/components.js';

Object.keys(Components).forEach(key => {
    Vue.component(key, Components[key]);
});

编辑 resources/assets/js/components/components.js

import BaseAlertAjaxError from './parts/alert/BaseAlertAjaxError';

export default Object.assign({
    BaseAlertAjaxError,  
})

在组件就可以直接叫出

base-alert-ajax-error(
v-bind:ajax-error="getAjaxError"
)

这样在组件就不需再 import 一次，在每个组件，也可重复共用。

------------------------------

前台：Vue.js 2+

后台：Laravel 5.5

系统：PHP7

HTML: Pug

Css: SASS

JQuery: 无

前后端分离写法