今天為大家所介紹是elementUI，對，他就是那個和美團外賣，百度外賣三分天下的那個餓了嗎外賣平臺，Elementui是由餓了么前端團隊推出的基于vue封裝的UI組件庫,提供了豐富的PC端組件，簡化了常用組件的封裝，大大降低了開發難度，并在多人合作開發網頁的過程中，極大的提高了開發速度。 下面為大家帶來elementUI組件的安裝和使用方法。

一、elementUI在項目中的引入

1.首先，我們來到elementUI的官網，點擊右上角組件，官網為大家提供了一套完整的安裝方案（能看到這篇文章的小伙伴肯定已經安裝好了node.js，如果沒有安裝的話可以查閱之前的相關文檔），請大家復制本段代碼在vsCode的終端或cmd命令提示符中下載依賴。

npm i element-ui -S

然后來到main.js中引入和應用我們下載的包，復制以下代碼

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
//此處應用elementUI
Vue.use(ElementUI);
 
new Vue({
    el: '#app',
    render: h => h(App)
});

Ps：以上為全局引入element，會導致原來并沒有用到的一些屬性或標簽被應用到Vm身上，大概會會導致跑腳手架的時候加載時間過長，為此element為我們提供了按需引入，這樣會大大加快腳手架的加載速度，缺點每應用一個新標簽就需要到main.js中引入新的屬性，如果你能忍受腳手架每次載入時多加載一秒的弊端，還是推薦使用全局引入。

PPs：這里提一句題外話，如果大家使用npm時安裝其他包的非常緩慢，可以檢查一下是否安裝了淘寶鏡像。

npm config get registry

如果返回的是https://registry.npm.taobao.org則說明鏡像已配置。

如果不是，而且下載比較慢的話，可以使用以下代碼來更換淘寶鏡像。

npm config set registry https://registry.npm.taobao.org

二、element在項目中的使用

通過上一步，我想大家應該安裝好了依賴，那么接下來的事就非常簡單了。

現在，請大家把鍵盤上除了ctrl和c，v以外的鍵全都扣了，多留一個都是對element框架的侮辱。

這里按照最簡單的按鈕為大家做一個演示。

然后把你復制的這一段放到