很多小夥伴在剛開始接觸前端基礎之一的css的時候會苦於它的屬性不正交的特性，阻礙重重。

那麼今天我們試下引入外部ui庫，用別人已經封裝好的樣式，可以讓我們騰出更多時間去”偷懶”。

首先先給大家奉獻技術哥在網上找到的vue開源專案庫，裡面ui庫、基於vue開發的框架、別人寫的demo一應俱全，今天用到的element元件也在這裡面：
https://juejin.im/entry/58bf745fa22b9d0058895a58

element——餓了麼官方ui元件庫

element是由餓了麼官方出品的一套基於vue2.0的ui庫,在vue開發中廣泛應用，同時也支援angular、react等框架的引入。

element有開發者生態圈大、業務元件全面、功能豐富支援SSR等特點。

如何引入element元件庫

1. 首先進入element官網，點選右上的”元件”，進入到”開發指南”欄下的”安裝”頁。
   

2. 用vscode開啟我們需要引入元件庫的vue工程，在”終端”一欄輸入npm安裝命令並回車：npm i element-ui -S

3. 點選”快速上手”進入到下一頁，在工程下的main.js檔案全域性引入element元件。
   

將上圖裡的：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

至此，引入element元件完成。

注：引入方式有”全域性引入”和”按需引入”兩種，

如何使用element元件

以element的顏色選擇器元件為例，我們可以開啟看它的原始碼：

接著可以直接把原始碼的html部分、js部分複製貼上到HelloWorld.vue裡執行：

然後開啟瀏覽器除錯就可以看到效果了：

當然，我們還可以通過改官方文件上給的可調引數實現其他效果：

同理，其他element元件也是一樣的使用方法。

若是用原生css實現像element這樣的元件，需要花費的時間和實現的難度是可觀的，我們通過element、iView等ui庫，可以站在巨人肩膀上開發，減輕前端工作量。