Element 是饿了么前端团队开发的一个基于 Vue.js 的桌面端组件库，它提供的组件非常丰富，不仅功能强大，而且简单易用。

Element 非常的流行，大多数基于 Vue.js 开发的管理系统都会使用到它。

官网地址: https://element.eleme.cn/#/zh-CN

ElementUI组件库在前端开发中应用非常广泛，废话不多说，直接说怎么在vue框架中使用该组件。引入该组件库时，分为全部引入、按需引入两种。

全部引入

引入方便，但会导致整个项目体积过大，毕竟也许你只需要一个Button,结果把整个组件库，连同所有的样式都引入了，项目体积能不大嘛！

1.安装

官网： https://element.eleme.cn/#/zh-CN/component/quickstart

推荐使用npm方式安装，在vscode终端中输入如下命令：

npm i element-ui -S

vue element 实现组织架构图 elements vue_ci


2.全部引入

在main.js中引入

//完整引入ElementUI组件库

import ElementUI from 'element-ui'; //引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css'; //引入ElementUI全部样式

Vue.use(ElementUI);   //使用插件

3.使用

在官网中可以看到，有各种各样的样式，如果需要，可以展开代码，直接C+V

vue element 实现组织架构图 elements vue_vue element 实现组织架构图_02


在App.vue中做测试，直接把官网上的相应格式的代码写在.vue文件中，我这里是引用的上图最后一行的图标的代码。

<template>
  <div>
    <button>普通的按钮</button><br/><br/>
    <input type="text"><br/><br/>

    <!-- el-row、el-button、el-date-picker 它们都是组件-->
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button><br/><br/>

      <!-- 自定义修改 type:primary/success/info/warning/danger            icon:图标   circle:是不是圆形-->
      <el-button type="success" icon="el-icon-s-check"></el-button>
    </el-row>
  </div>
</template>

<script>
export default {

}
</script>

使用type、plain、round和circle属性来定义 Button 的样式。

我们通过更改属性的值，进行自定义样式。

以 Button按钮为例：https://element.eleme.cn/#/zh-CN/component/button

下表是对各个属性的介绍，以及可取参数说明。摘自官网

Attributes

参数

说明

类型

可选值

默认值

size

尺寸

string

medium / small / mini

—

type

类型

string

primary / success / warning / danger / info / text

—

plain

是否朴素按钮

boolean

—

false

round

是否圆角按钮

boolean

—

false

circle

是否圆形按钮

boolean

—

false

loading

是否加载中状态

boolean

—

false

disabled

是否禁用状态

boolean

—

false

icon

图标类名

string

—

—

autofocus

是否默认聚焦

boolean

—

false

native-type

原生 type 属性

string

button / submit / reset

button

不管是Button还是其他的，每个的下面都会有相应属性的介绍和参数的说明，我们需要时就可以通过修改这些属性的值，来自定义格式。授人以鱼，不如授之以渔。快快做到举一反三吧。

按需引入

大部分时候我们只需要引入其中的某一个或者某几个，我们没必要把所有的组件库和css样式都引入到项目中，推荐采用按需引入。减小项目的体积。

1.安装

推荐使用npm方式安装，在vscode终端中输入如下命令：需要借助babel-plugin-component

//-D  表示开发环境中安装
npm install babel-plugin-component -D

修改配置文件：babel.config.js

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

上面是最新的配置，下面的图是官网上的(老的，官网那个文档没有更新)，可以参考下，需要修改的就是红线框圈出的两处。

vue element 实现组织架构图 elements vue_ico_03


修改完babel.config.js配置文件后，最好重启一下服务,在vscode终端输入：

npm run serve

2.按需引入

在main.js中引入

//按需引入ElementUI组件库
import{Button,Row,DatePicker} from 'element-ui'

//需要哪个引入哪个
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);

3.使用
和上述App.vue中的内容一样。