vue实现自定义element组件库

element是个优秀的vue组件库，不仅组件类别齐全，同时满足开发者、设计师和产品经理需求的网站快速成型工具，而且它代码实现也很值得去学习的。因此，如果想要搭建一个自己的组件库，element的组件实现方式可以借鉴来用。

element官方组件库的部分源码 ，如下图所示：

 

1、创建组件文件

在自己的项目中创建自己组件文件，一个组件功能，放一个文件夹中。

 2、配置index.js的install

在组件文件下的index.js中配置install(如上图的index.js文件路径为：components->myUi->Message->index.js)

import Message from "./Message.vue"

Message.install = function(Vue) {
  Vue.component(Message.name, Message);
};

export default Message;

 3、全局use()注册所有组件

想要想element那样 use(elementui) 就可以使用全部组件，还需要配置一下所有组件的install(文件路径为：components->myUi->index.js)

import alert from "./Message/index.js"
 const components =[
	 alert
 ]

const install = function(Vue,opts){
	components.forEach(component =>{
		Vue.component(component.name,component)
	})
}
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
	alert,
	install
}

 最后，在项目的main.js中引入组件库

import Vue from 'vue'
import App from './App'
import myUi from 'components/myUi/index.js'

Vue.use(myUi)

......

 页面使用