# 环境依赖
@vue/cli  4.0.5
vue  2.6.10"
element-ui  2.13.0
babel-plugin-component  1.1.1

全局安装

可以直接引入整个 Element ，使用 npm 进行安装：

npm i element-ui -S

然后在 main.js 中加入以下内容:

import Vue from 'vue'
import ElementUI from 'element-ui' // 引入框架
import 'element-ui/lib/theme-chalk/index.css' // 引入样式文件
import App from './App.vue'
Vue.use(ElementUI) // 注册
new Vue({
  el: '#app',
  render: h => h(App)
})

然后就可以直接在其他组件使用 Element 了。

<!-- Home.vue -->
<template>
  <div class="home">
    <el-button type="primary">按钮</el-button>
  </div>
</template>
<script>
export default {
  name: "home"
};
</script>

按需加载

当然也可以只引入需要的组件，以达到减小项目体积的目的。

首先安装一个按需加载的模块：

npm install babel-plugin-component -D

然后，将根目录下的 babel.config.js修改为：

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

如果该文件不存在的话可以直接新建一个，或者新建一个 .babelrc 文件设置以下代码也是可以滴：

{
  presets: ["@vue/cli-plugin-babel/preset"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

上面一步的配置修改好之后，在根目录下新建 ./plugins/element.js 文件：

import Vue from 'vue'
// 如果你只希望引入部分组件，比如 Button 和 Menu，那么就直接引入对应的组件名
import { Menu, Button } from 'element-ui'
Vue.use(Menu)
Vue.use(Button)

然后在 main.js 中引入 element.js 文件：

import Vue from 'vue'
import './plugins/element' // 注意只引入该文件
import App from './App.vue'
new Vue({
  el: '#app',
  render: h => h(App)
})

最后直接在需要用到 element 的组件中直接使用：

<!-- Home.vue -->
<template>
  <div class="home">
    <!-- 注意：element.js 中引入时是写的 Button，这里做组件使用时要在前面加上 el- -->
    <el-button type="primary">按钮</el-button>
  </div>
</template>
<script>
export default {
  name: "home"
};
</script>

如何引入 notice 等组件

如果是全局引入 element-ui ，那么就可以直接在项目中按照以下方式使用 Notification、Message、MessageBox 等：

this.$notify(options);
this.$message(options);
this.$msgbox(options);
this.$alert(message, title, options) 或 this.$alert(message, options)
this.$confirm(message, title, options) 或 this.$confirm(message, options)
this.$prompt(message, title, options) 或 this.$prompt(message, options)

如果是按需加载引入 element-ui 则在需要用到的组件中进行引用：

<template>
  <div class="login">
    <button type="button" @click="submitLoginForm">提交</button>
  </div>
</template>
<script>
// 第一步：引入 组件
import { Notification } from 'element-ui';
export default {
  name: "Login",
  data() {
    return {
      }
    };
  },
  methods: {
    submitLoginForm() {
      // 第二步，调用
      Notification({
        title: '标题',
        message: '这是提示文案'
      });
    }
  }
};
</script>

也可以直接将 Notification 等方法添加到 Vue 的原型上：

// main.js
import { Notification, Message, MessageBox, Loading } from 'element-ui'
Vue.prototype.$notify = Notification
// Vue.prototype.$message = Message
// Vue.prototype.$msgbox = MessageBox
// Vue.prototype.$alert = MessageBox.alert
// Vue.prototype.$confirm = MessageBox.confirm
// Vue.prototype.$prompt = MessageBox.prompt
// Vue.prototype.$loading = Loading.service

然后直接在组件中使用：

this.$notify(options);

【喜欢我的文章欢迎 转发 点赞 与 关注，我会经常与大家分享前端的知识点的】