技術(shù)哥
給你不一樣的世界
很多小伙伴在剛開始接觸前端基礎(chǔ)之一的css的時(shí)候會(huì)苦于它的屬性不正交的特性懈息，阻礙重重俺陋。
那么今天我們試下引入外部ui庫国拇，用別人已經(jīng)封裝好的樣式疹尾，可以讓我們騰出更多時(shí)間去"偷懶"上忍。
首先先給大家奉獻(xiàn)技術(shù)哥在網(wǎng)上找到的vue開源項(xiàng)目庫骤肛，里面ui庫、基于vue開發(fā)的框架窍蓝、別人寫的demo一應(yīng)俱全萌衬，今天用到的element組件也在這里面：
https://juejin.im/entry/58bf745fa22b9d0058895a58
element------餓了么官方ui組件庫
element官網(wǎng)地址：http://element.eleme.io/#/zh-CN
element是由餓了么官方出品的一套基于vue2.0的ui庫,在vue開發(fā)中廣泛應(yīng)用，同時(shí)也支持angular它抱、react等框架的引入秕豫。
element有開發(fā)者生態(tài)圈大、業(yè)務(wù)組件全面观蓄、功能豐富支持SSR等特點(diǎn)混移。
如何引入element組件庫
-
首先進(jìn)入element官網(wǎng)，點(diǎn)擊右上的"組件"侮穿，進(jìn)入到"開發(fā)指南"欄下的"安裝"頁歌径。
element開發(fā)指南 -
用vscode打開我們需要引入組件庫的vue工程，在"終端"一欄輸入npm安裝命令并回車：
npm i element-ui -S引入element-終端 -
點(diǎn)擊"快速上手"進(jìn)入到下一頁亲茅，在工程下的main.js文件全局引入element組件回铛。
點(diǎn)擊進(jìn)入下一頁
將上圖里的：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);三行代碼復(fù)制粘貼到我們工程里的main.js里：
至此，引入element組件完成克锣。
注：引入方式有"全局引入"和"按需引入"兩種茵肃，
如何使用element組件
以element的顏色選擇器組件為例，我們可以打開看它的源碼：
接著可以直接把源碼的html部分袭祟、js部分復(fù)制粘貼到HelloWorld.vue里運(yùn)行：
然后打開瀏覽器調(diào)試就可以看到效果了：
當(dāng)然验残，我們還可以通過改官方文檔上給的可調(diào)參數(shù)實(shí)現(xiàn)其他效果：
同理，其他element組件也是一樣的使用方法巾乳。
若是用原生css實(shí)現(xiàn)像element這樣的組件您没，需要花費(fèi)的時(shí)間和實(shí)現(xiàn)的難度是可觀的，我們通過element胆绊、iView等ui庫氨鹏，可以站在巨人肩膀上開發(fā)，減輕前端工作量压状。
往期回顧
前端 | vue.js系列教程3
如何使用CORS解決跨域問題
區(qū)塊鏈教程 | 快速入門
web前端 | vue.js系列教程2
web前端 | vue.js環(huán)境搭建
服務(wù)端 | 如何實(shí)現(xiàn)物聯(lián)網(wǎng)后臺(tái)
原創(chuàng)文章仆抵，轉(zhuǎn)載請注明：轉(zhuǎn)載自技術(shù)哥
