前言

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

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

Element-ui(餓了么ui)

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

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

官網(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)擊組件即可跳到組件使用說(shuō)明主頁(yè)

安裝element-ui

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

打開(kāi)終端，輸入：

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組件庫(kù)
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ù)制到代碼里面

只能說(shuō)，沒(méi)有對(duì)比就沒(méi)有傷害

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

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

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

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

直接拿來(lái)就用，這不香嗎？

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

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

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

按需引入element-ui

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

首先就是先把完整引入的代碼進(jìn)行注釋?zhuān)缓蟛榭垂倬W(wǎng)

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

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

安裝 babel-plugin-component

打開(kāi)終端，輸入：

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ò)誤不是我們的鍋，是由于腳手架和組件庫(kù)不統(tǒng)一造成的

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

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

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

如果說(shuō)缺什么安裝什么即可

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

改過(guò)之后就解決了

再次訪問(wèn)頁(yè)面發(fā)現(xiàn)樣式還在，并且體積變小了

總結(jié)

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

到此這篇關(guān)于Vue引入并使用Element組件庫(kù)的兩種方式小結(jié)的文章就介紹到這了,更多相關(guān)Vue引入并使用Element組件庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論