1. 创建一个公共的目录 timeline ，里面包含 timeline.js 和 timeline.vue 文件，timeline.vue 用来写公共的页面，timeline.js 用来导出这个组件。
在这里插入图片描述
在这里插入图片描述
timeline.vue 文件内容如下
<template>
<div>页面展示内容</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>
<style lang="less" scoped>
</style>
timeline.js 文件内容如下
import timelineData from './timeline.vue';
const timeline = {
install: (Vue) => {
// 注册并获取组件，然后在 main.js 中引入，并 Vue.use()挂载
Vue.component('timeline', timelineData)
}
};
export default timeline;
2. 在 main.js 中引入公共的文件并挂载到Vue中
...
// 引入timeline
import timeline from './timeline/timeline.js';
Vue.use(timeline);
...
3. 在需要用到 timeline 的组件文件中直接使用即可
<template>
<div>
// 页面中直接使用即可
<timeline></timeline>
</div>
</template>
