前端 | vue.js系列教程4之整合Element样式库

---

技术哥

给你不一样的世界

---

很多小伙伴在刚开始接触前端基础之一的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---评分

如何引入element组件库

1. 首先进入element官网，点击右上的"组件"，进入到"开发指南"栏下的"安装"页。

   
   
   element开发指南

2. 用vscode打开我们需要引入组件库的vue工程，在"终端"一栏输入npm安装命令并回车：npm i element-ui -S

   引入element-终端

3. 点击"快速上手"进入到下一页，在工程下的main.js文件全局引入element组件。

   
   
   点击进入下一页

element开发指南--快速上手

将上图里的：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);三行代码复制粘贴到我们工程里的main.js里：

main.js引入element

至此，引入element组件完成。

注：引入方式有"全局引入"和"按需引入"两种，

如何使用element组件

以element的颜色选择器组件为例，我们可以打开看它的源码：

颜色选择器

接着可以直接把源码的html部分、js部分复制粘贴到HelloWorld.vue里运行：

vue使用颜色选择器

然后打开浏览器调试就可以看到效果了：

颜色选择器使用效果

当然，我们还可以通过改官方文档上给的可调参数实现其他效果：

element颜色选择器文档

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

若是用原生css实现像element这样的组件，需要花费的时间和实现的难度是可观的，我们通过element、iView等ui库，可以站在巨人肩膀上开发，减轻前端工作量。

---

往期回顾
前端 | vue.js系列教程3
如何使用CORS解决跨域问题
区块链教程 | 快速入门
web前端 | vue.js系列教程2
web前端 | vue.js环境搭建
服务端 | 如何实现物联网后台

---

原创文章，转载请注明：转载自技术哥

关注“技术哥”的微信公众号查看更多技术文章