Vue.js框架：自定义组件全局挂载，避免每个用到的页面需要重复导入问题

一、打包组件

　　可以建立一个打包工具类，将所有的需要全局挂载的自定义组件进行打包封装，避免main.js过于杂乱。

import gbInput from '../components/gbInput/gbInput'
//...

//自定义组件打包安装类，引入main.js后全局挂载，避免每个用到的页面重复引入
const pack = {
  install:function(Vue) {
    Vue.component('gb-input', gbInput)
    //...
  }
}

export default pack;

　　通过import引入自定义组件，在vue的install方法中进行全局注册。

　　该方法可以添加的类型如下：

export default {
    install(Vue,option){
        组件
        指令
        混入
        挂载vue原型
    }
}

　　通过Vue.component('gb-input', gbInput)来进行挂载。

二、引入使用

　　在main.js中引入打包的工具类，并进行使用：

import pack from "./utils/pack";

Vue.use(pack)

　　这样就可以直接在页面中通过挂载时定义的组件名称gb-input来使用gbInput组件了，无需每个页面都import并在component中定义。