（快速上手）ElementUI組件在vue中的應用

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

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

在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"
      }
    ]
  ]
}

上面是最新的配置，下面的圖是官網上的(老的，官網那個文檔沒有更新)，可以參考下，需要修改的就是紅線框圈出的兩處。

修改完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中的內容一樣。