快捷導(dǎo)航

Vue引入并使用Element組件庫的兩種方式小結(jié)

更新時(shí)間：2023年01月15日 10:24:04 作者：小花皮豬

本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

Element-ui(餓了么ui)

element-ui(餓了么ui)是一個(gè)非常好用且美觀的組件庫(插件庫)，主要用于網(wǎng)站快速成型，由國(guó)產(chǎn)團(tuán)隊(duì)餓了么團(tuán)隊(duì)開發(fā)的，所有又稱餓了么ui。

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

官網(wǎng)：elementui官網(wǎng)文檔

這里會(huì)提示不同的vue不同的版本對(duì)應(yīng)的element-ui不同的官方，當(dāng)然模式跳轉(zhuǎn)的還是2.0版本，由此可以斷定目前使用vue2.0和element-ui2.0的還是較多的

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

點(diǎn)擊組件即可跳到組件使用說明主頁

安裝element-ui

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

打開終端，輸入：

npm i element-ui

引入element-ui

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

完整引入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';
// 關(guān)閉Vue的生產(chǎn)提示
Vue.config.productionTip=false
// 使用element
Vue.use(ElementUI)
// 創(chuàng)建vm 
const vm=new Vue({
    el:'#app',
    render:h=>h(App),  
})

使用element-ui的元素

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

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

找到想用的組件，復(fù)制即可

復(fù)制到代碼里面

只能說，沒有對(duì)比就沒有傷害

它其實(shí)就是一個(gè)個(gè)封裝好的組件，可以通過開發(fā)者工具看到

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

再復(fù)雜也不怕，直接復(fù)制即可

  <span class="demonstration">默認(rèn)</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="選擇日期">
      </el-date-picker>

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

每一個(gè)組件都有對(duì)應(yīng)的參數(shù)，需要往下滑動(dòng)，如下是button的屬性說明：

但是這種全部引用也是有問題的，我們現(xiàn)在只用到了3個(gè)組件，但是這種全部引用的方式相當(dāng)于把element-ui全部的組件都幫我們引用了，有點(diǎn)浪費(fèi)資源，如下圖在network中可以看到

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

按需引入element-ui

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

首先就是先把完整引入的代碼進(jìn)行注釋，然后查看官網(wǎng)

點(diǎn)擊這個(gè)藍(lán)色的地址，會(huì)跳向github，值得注意的是這個(gè)按需引入的作者是ant design團(tuán)隊(duì)進(jìn)行開發(fā)的(ant design也推出了可以給vue使用的ui組件庫)

接下來回到文檔，安裝文檔說明進(jìn)行操作

安裝 babel-plugin-component

打開終端，輸入：

npm install babel-plugin-component -D

修改.babelrc(babel.config.js)

最新的腳手架已經(jīng)不叫了.babelrc，而是babel.config.js

引入需要的組件

解決報(bào)錯(cuò)

這時(shí)候啟動(dòng)，發(fā)現(xiàn)報(bào)錯(cuò)了，這個(gè)錯(cuò)誤不是我們的鍋，是由于腳手架和組件庫不統(tǒng)一造成的

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

這時(shí)候又報(bào)錯(cuò)了

這個(gè)錯(cuò)誤是因?yàn)槟_手架版本的問題，更換即可babel預(yù)設(shè)環(huán)境即可，這個(gè)錯(cuò)誤比較惡心

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

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