vue全局自动挂载组件

vue组件的挂载分为局部和全局

局部挂载组件就是在每一个需要引入的页面，去引入你需要的组件：

import ... from '../..'

并且需要声明：

components: {

    ...//引入的组件名   

}

我们可以发现每次使用都需要引入和声明，这样会大大影响效率。

全局挂载组件就不需要每次引用每次都挂载，只需要全局挂载一次

我们在components文件夹下的index.js中做一些全局挂载逻辑

index.js

代码如下：

import Vue from 'vue'

//封装获取组件name的方法

const resolveComponentName = (component, componentFile = '') => {

  //获取到组件的name名称

  let componentName = (component.default || component).name

    if (!componentName && componentFile) {

    const fileName = componentFile.replace(/^.*\/([^/]+)\.js/, '$1')

    if (fileName !== 'index') {

        // 非 index.js 直接将文件名作为组件名

        componentName = fileName

    } else {

        // 文件名是index.js

        // 将该文件的最后一层的目录名作为组件名

        componentName = componentFile.replace(/^(.*\/)?([^/]+)\/index\.js$/, '$2')

      }

    }

  return componentName || ''

}

const context = require.context('./', true, /^(?!\.?\/?index\.js$).*\.(js|vue)$/)

//遍历组件

context.keys().forEach(componentFilePath => {

  const component = context(componentFilePath)

    if (component.__ignore) {

      // true 表示该组件不会注册到vue组件中，但依然会被加载

      return

    }

    //获取组件中的name

    let componentName = resolveComponentName(component, componentFilePath)

    //组件名不存在打印错误

    if (!componentName) {

      console.error(`Component ${componentFilePath} register faild, the component name is undefined`)

      return

    }

    // console.log(componentFilePath)

    //挂载vue上，全局使用

    Vue.component(componentName, component.default || component)

})

最终我们只需要在main.js中去引入这个文件即可

引入index.js

直接使用封装好的组件：

使用组件

需要注意的是我们所用的组件名字必须要和我们封装组件的name一致：

组件name

最终展示效果：

效果展示