element-ui（桌面組件庫） 的使用

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

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

   第二種方式：按需引入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>