1

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>

Liu_xiaoqing
32 声望2 粉丝