全局注册组件

方法一

在main.js中,导入组件,使用Vue.component(组件名,组件)

//全局注册组件
 import PageTools from '@/components/PageTools'
 Vue.component('PageTools', PageTools)

方法二

使用Vue.use注册(参考官网)

0. 如果导出的插件是一个对象,则install作为对象的方法使用,使用时传参Vue

```
​
//index.js设置
// 使用Vue.use()注册全局组件
import PageTools from '@/components/PageTools'
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}
​
//main.js设置
import plugin from '@/components'
Vue.use(plugin)
​
```

2.如果导出的插件是一个函数,则它会被最为install方法,被调用时传递参数Vue

//index.js设置
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}
​
//main.js设置
import plugin from '@/components'
Vue.use(plugin)

方法三

当公共组件较多时,可以使用循环注册组件,需要使用webpack中提供的一个方法require.context()

//index.js设置
// 循环全局注册组件
// 使用webpack的一个方法require.context()
// 该方法有三个参数
// 参数 1 :路径
// 参数 2 :是否深层次查找
// 参数 3 :正则,圈定查找的文件类型
export default {
  install(Vue) {
    const requireComponents = require.context('./', true, /.vue$/)
    // 该方法中有一个keys方法能得到一个数组即查找的当前目前下的所有对应类型文件的路径
    // console.dir(requireComponents.keys())
    //  ["./Breadcrumb/index.vue",
    //  "./Hamburger/index.vue",
    //  "./PageTools/index.vue",
    //  "./SvgIcon/index.vue"]
    requireComponents.keys().forEach(ele => {
      // requireComponents(ele).default得到的就是么一个组件中export default{}导出的模块
      const defaultComponents = requireComponents(ele).default
      Vue.component(defaultComponents.name, defaultComponents)
    })
  }
}
​
​
//main.js设置
import plugin from '@/components'
Vue.use(plugin)

此种方法优势,后期该目录下的公共组件直接使用即可 注意此种方法,组件中一定需要设置name值,否则会报错

前端前端 \