安装

1	npm i element-ui -S

全局导入

直接编辑 main.js 文件，添加如下内容：

1
2
3

import element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(element);

按需导入

安装 babel-plugin-component：

1	npm install babel-plugin-component -D

配置 babel.config.js，添加如下内容：

module.exports = {
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

新建目录及文件 src/element/index.js，并添加代码：

import Vue from 'vue'
import { Button, Input } from 'element-ui'

const element = {
  install: function (Vue) {
    Vue.use(Button)
    Vue.use(Input)
  }
}

export default element

需要用到哪个组件自行添加就可以了。

在 main.js 文件中导入：

1
2
3

import element from './element/index'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(element)

注意

在使用 Message 、Notification 这些组件的时候，如果像上面按需导入的写法会发现有报错。因为这些组件的使用需要挂载到原型对象上。

编辑 src/element/index.js 文件：

import Vue from 'vue'
import { Notification, Message } from 'element-ui'

const element = {
  install: function (Vue) {
    Vue.use(Notification)
    Vue.use(Message)
  }
}

Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

export default element