zoukankan      html  css  js  c++  java
  • 在vue项目中使用elementui

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

    最近我做的项目几乎都是管理系统,所以为了节约时间,开始使用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,便可以自定义它的样式咯。

     
     

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

     
    加了宽度的效果



  • 相关阅读:
    [BZOJ2324][ZJOI2011]营救皮卡丘
    P4324 [JSOI2016]扭动的回文串
    P5068 [Ynoi2015]我回来了
    P4412 [SHOI2004]最小生成树
    bzoj3118: Orz the MST(线性规划+单纯形法)
    bzoj3265: 志愿者招募加强版(线性规划+单纯形法)
    bzoj3550: [ONTAK2010]Vacation(单纯形法+线性规划)
    uoj#179. 线性规划
    P2093 [国家集训队]JZPFAR(KDTree)
    P3538 [POI2012]OKR-A Horrible Poem
  • 原文地址:https://www.cnblogs.com/sea520/p/11751631.html
Copyright © 2011-2022 走看看