在vue-cli中封装全局组件

默认的项目目录如下

封装全局组件，一般是在src/component/global下写组件，然后建立一个index.js文件

我们假设在global下有一个组件，v-editor.vue 和 v-upload.vue两个组件，那index.js文件代码示例如下：

import vEditor from './v-editor'
import vUpload from './v-upload'

const components = {
    vEditor,
    vUpload
}

const install = function (Vue) {
  for (let key in components) {
    Vue.component(components[key].name, components[key])
  }
}

if (typeof window !== 'undefined' && window.Vue) {
  install(Window.vue)
}

components.install = install

export default components

现在在main.js中引入自定义组件

import globalComponent from './components/global'
Vue.use(globalComponent)

这样我们已经把自定义组件封装完成了，注： 用这种方法封装全局组件，在使用时，和组件的name保持一致，而不是和文件名保持一致。