前言

在開發的時候，雖然我們可以自己寫css或者js甚至一些動畫特效，但是也有很多開源的組件庫幫我們寫好了。我們只需要下載并引入即可。

vue和element-ui在開發中是比較般配的，也是我們開發中用的很多的，下面就介紹下如何在eue項目中引入element-ui組件庫

注意：本文介紹的是vue2.0引用Element-UI，如果是vue3.0就應該使用Element-Plus，也叫Element+，如果vue2.0安裝Element-Plus是會有版本問題的。

Element-ui(餓了么ui)

element-ui(餓了么ui)是一個非常好用且美觀的組件庫(插件庫)，主要用于網站快速成型，由國產團隊餓了么團隊開發的，所有又稱餓了么ui。

不管是任何的ui組件庫，都不需要死記硬背，需要使用的時候查閱官方文檔即可，官方讓怎么寫，我們就怎么寫即可，主要的工作就是復制粘貼，任何的組件庫寫法都是一樣的大同小異的。

官網：elementui官網文檔

這里會提示不同的vue不同的版本對應的element-ui不同的官方，當然模式跳轉的還是2.0版本，由此可以斷定目前使用vue2.0和element-ui2.0的還是較多的

這里我使用的是vue2.0所以使用element-ui2.0即可

點擊組件即可跳到組件使用說明主頁

安裝element-ui

根據官網的說明，首先需要安裝element-ui，當然也可以在線使用link引入，推薦還是使用腳手架安裝使用

打開終端，輸入：

npm i element-ui

引入element-ui

可以看到官網提供的引入方式有兩種，分別為完整引入和按需引入，下面一一介紹

完整引入element-u

在main.js里面引入element-ui

// 引入Vue import Vue from 'vue' // 引入App import App from './App.vue' // 引入elemetn-ui組件庫 import ElementUI from 'element-ui'; // 引入element-ui全部css import 'element-ui/lib/theme-chalk/index.css'; // 關閉Vue的生產提示 Vue.config.productionTip=false // 使用element Vue.use(ElementUI) // 創建vm const vm=new Vue({el:'#app',render:h=>h(App), })

使用element-ui的元素

引入完成后，就可以隨便使用它的組件樣式了，想要使用element-ui的元素組件非常簡單，復制粘貼就完事了

這里我為了對比使用了原生的按鈕和element-ui提供的按鈕

找到想用的組件，復制即可

復制到代碼里面

只能說，沒有對比就沒有傷害

它其實就是一個個封裝好的組件，可以通過開發者工具看到

如果說這按鈕我們也能寫，但是如果使用比較復雜的組件讓我們自己寫那就真的很費勁了，選擇使用一個復雜的組件：日歷

再復雜也不怕，直接復制即可

<span class="demonstration">默認</span><el-date-pickerv-model="value1"type="date"placeholder="選擇日期"></el-date-picker>

直接拿來就用，這不香嗎？

每一個組件都有對應的參數，需要往下滑動，如下是button的屬性說明：

但是這種全部引用也是有問題的，我們現在只用到了3個組件，但是這種全部引用的方式相當于把element-ui全部的組件都幫我們引用了，有點浪費資源，如下圖在network中可以看到

針對這種情況，就有了第二種引入方式：按需引入

按需引入element-ui

按需引入就是一不同于全部引入，不會一上來引入全局的組件和樣式，而是看使用了哪些組件，根據使用的組件進行注冊，并且只引入這些組件相關的樣式，下面開始操作

首先就是先把完整引入的代碼進行注釋，然后查看官網

點擊這個藍色的地址，會跳向github，值得注意的是這個按需引入的作者是ant design團隊進行開發的(ant design也推出了可以給vue使用的ui組件庫)

接下來回到文檔，安裝文檔說明進行操作

安裝 babel-plugin-component

打開終端，輸入：

npm install babel-plugin-component -D

修改.babelrc(babel.config.js)

最新的腳手架已經不叫了.babelrc，而是babel.config.js

引入需要的組件

解決報錯

這時候啟動，發現報錯了，這個錯誤不是我們的鍋，是由于腳手架和組件庫不統一造成的

提示什么東西not found就使用npm i xxx安裝即可

這時候又報錯了

這個錯誤是因為腳手架版本的問題，更換即可babel預設環境即可，這個錯誤比較惡心

如果說缺什么安裝什么即可

module.exports = {presets: ['@vue/cli-plugin-babel/preset',["@babel/preset-env", { "modules": false }],],plugins:[["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]] }

改過之后就解決了

再次訪問頁面發現樣式還在，并且體積變小了

總結

其他的組件庫使用也是和上述步驟大同小異的。

總結

以上是生活随笔為你收集整理的Vue引入并使用Element-UI组件库的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。