Vue中引用公共组件

1.在src目录下的pages文件夹下新建公共组件

image.png

2.在main.js中引用，这里需要引用并初始化组件三个步骤

import CommonIndex from '@/pages/commonmodule/CommonIndex' // 引入公共组件
Vue.use(CommonIndex); // 引用自定义组件
Vue.component('common-index',CommonIndex) // 初始化组件
new Vue({
  el: '#app',
  router,
  components: { 
    App,
    CommonIndex
  },
  template: ''
})

image.png

3.在其他组件中直接用common-index 组件即可，不需要再次引入组件。

image.png