20，一线互联网架构师前端框架体系架构

以一个简单的Ant Design Vue面包屑组件为例，官方的示例用法如下：

项目中，我们在components下新建的breadcrub文件夹新建Breadcrumb.vue（自定义组件内容）和index.js（导出自定义组件）两个文件。

自定义面包屑组件Breadcrumb.vue代码如下：

/* @import url(); 引入css类 */

2.导出自定义组件

========================================================================

在自定义组件同目录下的index.js文件中定义该组件作为公共组件的名称并且进行全局注册：

import Breadcrumb from './Breadcrumb.vue'

const MyBreadcrumb = {

// install 为Vue实例上的一个方法

install: function (Vue) {

// 注册全局组件，此时MyBreadcrumb为使用的组件名称

Vue.component('MyBreadcrumb', Breadcrumb)

}

}

// 导出组件

export default MyBreadcrumb

3.main.js中引入自定义的公共组件并挂在到Vue

==========================================================================================

// 引入自定义组件

import MyBreadcrumb from './components/breadcrumb'

// 挂载自定义组件

Vue.use(MyBreadcrumb)

4.使用自定义的公共组件

===========================================================================

接着就可以在项目中的任何地方使用该组件了。props中的变量在父组件中可以重新传入进行覆盖或者不传则使用默认值。本例中对面包屑二级和三级变量items进行了覆盖处理，对自定义分隔符separator不做处理，仍然使用默认值。