技术哥
给你不一样的世界
很多小伙伴在刚开始接触前端基础之一的css的时候会苦于它的属性不正交的特性，阻碍重重。
那么今天我们试下引入外部ui库，用别人已经封装好的样式，可以让我们腾出更多时间去"偷懒"。
首先先给大家奉献技术哥在网上找到的vue开源项目库，里面ui库、基于vue开发的框架、别人写的demo一应俱全，今天用到的element组件也在这里面：
https://juejin.im/entry/58bf745fa22b9d0058895a58
element------饿了么官方ui组件库
element官网地址：http://element.eleme.io/#/zh-CN
element是由饿了么官方出品的一套基于vue2.0的ui库,在vue开发中广泛应用，同时也支持angular、react等框架的引入。
element有开发者生态圈大、业务组件全面、功能丰富支持SSR等特点。
如何引入element组件库
-
首先进入element官网，点击右上的"组件"，进入到"开发指南"栏下的"安装"页。
element开发指南 -
用vscode打开我们需要引入组件库的vue工程，在"终端"一栏输入npm安装命令并回车：
npm i element-ui -S引入element-终端 -
点击"快速上手"进入到下一页，在工程下的main.js文件全局引入element组件。
点击进入下一页
将上图里的：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);三行代码复制粘贴到我们工程里的main.js里：
至此，引入element组件完成。
注：引入方式有"全局引入"和"按需引入"两种，
如何使用element组件
以element的颜色选择器组件为例，我们可以打开看它的源码：
接着可以直接把源码的html部分、js部分复制粘贴到HelloWorld.vue里运行：
然后打开浏览器调试就可以看到效果了：
当然，我们还可以通过改官方文档上给的可调参数实现其他效果：
同理，其他element组件也是一样的使用方法。
若是用原生css实现像element这样的组件，需要花费的时间和实现的难度是可观的，我们通过element、iView等ui库，可以站在巨人肩膀上开发，减轻前端工作量。
往期回顾
前端 | vue.js系列教程3
如何使用CORS解决跨域问题
区块链教程 | 快速入门
web前端 | vue.js系列教程2
web前端 | vue.js环境搭建
服务端 | 如何实现物联网后台
原创文章，转载请注明：转载自技术哥
