1. 安装 babel-plugin-component

npm install babel-plugin-component -D

2. 在项目目录下创建 elementUi / index.js 目录及文件

elementUi / index.js

// 里面的这些 MessageBox Dropdown 都是 element 组件库标签的驼峰写法
import { MessageBox, Message, Dropdown, DropdownMenu, DropdownItem } from 'element-ui';

const element = {
	install: function (Vue) {
		Vue.use(Dropdown);
		Vue.use(DropdownMenu);
		Vue.use(DropdownItem);

        // 下面是注册 element 的 动态组件重命名 到 原型中
		Vue.prototype.$msgbox = MessageBox;
		Vue.prototype.$alert = MessageBox.alert;
		Vue.prototype.$confirm = MessageBox.confirm;
		Vue.prototype.$message = Message;
	},
};
export default element;

3. 在 main.js 中引入

main.js

import element from './elementUi/index';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(element);

4. 在组件中使用上面注册的组件标签即可