如何让你的前端程序看起来很优雅而又简单。

最近我做的项目几乎都是管理系统，所以为了节约时间，开始使用ui框架-----elementui。

一个简单的管理系统来说，这套ui框架足够使用了，而且对样式的自定义来说，这套ui框架相对于比较灵活。

为什么我说管理系统适合用这套ui呢，因为管理系统大多数使用到的组件都能在这上面找到，而且看起来清晰淡雅，不信你看：

elementui的官方地址：http://element-cn.eleme.io/#/zh-CN

中文版的，很容易理解，左侧是它集成的组件列表，右侧则是实例的样子和源码。

elementui

想当初我对ui框架是从来都不光顾的，但前端两大ui框架还是好用的，pc端可以使用这套，移动端可以使用vant。这里我们先不过多介绍vant，今天我们的主题是elementui。

这套组件的有点就是，你要的它都几乎都有，什么时间控件、好看的select、轮播图、折叠菜单啊，你都可以找到。

因此这对于一个做项目管理系统的开发人员来说，可以节省很多写样式的时间。

在vue项目中使用插件，都是把依赖包下载下来。你便可以在你的node_modules里面找到。引入方式有多种，如果你的整个项目所有页面都需要使用到插件，你可以在main.js里面引入，例如：

引入

在main.js里面引入的插件或者组件和样式，都是全局的。

你也可以选择在你页面中的script里面import。这种的引入方式，只作用于你当前的页面。

例子

我在我的项目中需要用到一个时间选择控件，因此我在官网上找到了这个

时间选择控件

在控件的下方，官网给了实例代码

实例代码

我把这一段粘贴到我的项目中，然后给它一个class，便可以自定义它的样式咯。

我给这个控件加了宽度之后，最后的展示效果是这样的。

加了宽度的效果

ok，例子已经完成，你学会了吗？

非常简单而且便捷的ui框架，你也赶紧用起来把~~