element-ui是什麼？

element-ui是餓了麼團隊開發的 基於mvvm的vue開源出來的一套前端ui框架。

element-ui能做什麼？

element-ui可以在vue中使用，也支援react 和angular 開發。

element-ui 可以按需找到元件，引入使用。有的元件是我們開發中經常要用到的。自己使用系統原生的遠遠滿足不了需求，二次開發不僅麻煩，而且難度大，使用這些ui框架可以大大降低開發難度。

element-ui互動體驗好；即使是複雜的表單操作，反饋也非常清楚，操作簡潔直觀；易上手，碼示例很充足。功能有：自定義主題，內建過渡動畫。元件有 佈局容器，按鈕，和form表單，上傳檔案，表格 ，彈框提示，選單，以及走馬燈等等常用的元件。

引入使用element-ui

element-ui官方網站。安裝使用。

https://element.eleme.cn/#/zh-CN/component/installation

安裝步驟：

1. npm安裝

推薦使用npm 的方式安裝，他能更好的和webpack打包工具配合使用。

npm i element-ui -S

• 使用vue-cli@3
• 引入element

第一種方式：全域性引入element。（不推薦，會導致檔案太大）

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 的引入。需要注意的是，樣式檔案需要單獨引入。

第二種方式：按需引入element。（推薦使用按需引入，節省空間）

首先，安裝babel-plugin-component外掛。(藉助babel-plugin-component,我們可以之引入需要的元件，以達到減小專案體積的目的。）

npm install babel-plugin-component -D

然後，配置外掛 ，將.babelrc修改為：

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

接下來就可以使用了， 如引入button和select 元件，那麼需要在main.js中寫入以下內容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或寫為
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

最後就可以使用了，引入程式碼就可以了。

2. CDN

目前可以通多unpkg.com/element-ui 獲取到最新版本的資源，在頁面上引入js和css檔案既可以開始使用。

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入元件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>