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

不管是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中的內容一樣。