vue项目导入elementui_在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,便可以自定义它的样式咯。

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

加了宽度的效果

ok,例子已经完成,你学会了吗?

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/566554.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

42021高考成绩查询北京6一个,北京高考成绩查询时间:6月27日

北京教育考试院发布:2014北京高考成绩将于6月27日公布。本文有出国留学网高考频道为大家搜集整理,希望对大家有所帮助。平行志愿只进行一轮投档从2014年起,北京高招本科志愿设置从“小平行志愿方式”调整为“平行志愿组方式”。本科一批、二批…

tecplot批量导出图片_tecplot使用教程

Tecplot的使用方法之前也零零星星的使用这个软件,但是作图主要还是使用Matlab软件。此次以给文章作图为契机,正好系统的学习一下。Tecplot有多个版本,当前使用的是比较新的Tecplot 360 EX 2018版。搜索到的教程中有Tecplot 360 2010版本的。常…

请领导批阅文件怎么说_请领导吃饭,不要对外说,职场员工为何如此保密?

前一段时间公司员工晋升,因为小王在公司的表现非常不错,所以成为了公司领导的秘书。其实按理来说,成为公司领导的秘书与否,往往只需要看这个员工有没有眼力,看她的办事能力如何,能不能提高公司的整体效率&a…

幼儿使用计算机需要注意事项,儿童玩电脑注意事项

相信现在的家庭里面很多小孩子爱玩电脑,但是电脑玩多了,对孩子眼睛、身体都不好,那么应该怎么才能科学玩电脑呢?妈网百科给大家总结了一些其他家长的经验,希望能够帮得到各位有需要的家长。【与电脑保持距离】孩子与电…

c++实现卷积码编码和维特比译码_鑫艾勒维特家用别墅电梯:安全至上,无可替代...

近年来,随着房地产行业的兴起,家用别墅电梯作为房地产配套产业也逐渐走进了平常家庭别墅中,如今一句俗语“无梯不成墅”将电梯在别墅中的重要地位彰显的淋漓尽致。艾勒维特家用液压小电梯因其适用于私人住宅,适用场景多样等特点&a…

山东高中计算机知识,普通高中信息技术课程标准(2017年版)解读

六、实施建议实施建议主要从教学与评价建议、水平等级考试命题建议、教材编写建议及课程实施建议四个方面展开。(一)教学与评价建议教学建议上,紧密围绕学科核心素养,凸显“学主教从、以学定教、先学后教”的专业路径,具体从领会学科核心素养…

python是一种跨平台、开源、免费的高级动态编程语言吗_python是一种跨平台、开源、免费的高级动态编程语言,对么...

python是一种跨平台、开源、免费的高级动态编程语言,对。python具有简单、易学、速度快、免费、开源、可移植性、可扩展性、丰富的库等优点。python语言极其容易上手,它是一种代表简单主义思想的语言。python是一种跨平台、开源、免费的高级动态编程语言…

html js 打印编辑页眉,js 设置网页打印的页眉页脚和页边距

var HKEY_Root,HKEY_Path,HKEY_Key;HKEY_Root"HKEY_CURRENT_USER";HKEY_Path"//Software//Microsoft//Internet Explorer//PageSetup/";var head,foot,top,bottom,left,right;//取得页面打印设置的原参数数据function PageSetup_temp() {try{var Wshnew Ac…

某个元素的距离页面的左边距_如何提高办公写作效率?先设置好页面上的这4类数据,准没错...

有人说,在体制内混的好,首先要文笔好。这里要说的是,一个文笔好的人,可能在哪里都能混的好。#直言职场#因为很多表达形式都需要以文字做雏形,进而进行各种形式的变换和转化。就拿当下很热门的自媒体行业来说&#xff0…

简述使用计算机对会计工作的影响,简述使用计算机对会计工作的影响。

简述使用计算机对会计工作的影响。更多相关问题[多选] 创新战略的层面有()。[单选] ()是对现有产品、流程、方法的所做的渐进式改善,使得现有产品或功能有进一步的改善、更方便或更为便宜。[单选] ()指组织对竞争者短期内的优缺点及长期力与策略的了解。[单选] ()实…

图像ISP处理——自动曝光AE算法

图像ISP(图像信号处理)是指对通过摄像头捕捉到的图像进行处理和优化的算法。这些算法旨在改善图像的质量,增强细节,降低噪音等。以下是一些常见的图像ISP算法: 自动白平衡(AWB): 调…

地线与接地螺丝_电气接地的规范要求及接地的各项参数,收藏!

申请加入微信群:加微信好友,diangong1968申请格式:城市-公司简称(电气工程师职称)点此去资料库下载本篇资料为了主要目的是保护人身和设备的安全,减少公司电气事故发生,控制公司人员和财产不受损失,所有电气…

html表单提交后显示,javascript – 在表单提交后在页面上显示消息

我有一个包含2个字段的表单(对于此示例),我使用JavaScript验证,如果字段包含数据,则表单将在用户单击“提交”按钮时提交.我在表单标签中使用iframe将输出发送到同一页面.我想做的是在表单下面显示一条消息,说“感谢您的提交”.我很难想出这个部分.function SubmitRentalForm()…

ai怎么渐变颜色_Ai渐变插画怎么丰富细节

此次教程只需小伙伴对AI软件有基本的操作了解就可以完成,易上手容易理解。止疼药瓶子1.新建画布800X600,绘制止疼药瓶子轮廓用矩形工具(W)绘制止疼药瓶子轮廓,圆角处用直接选择工具(A)选择矩形2个锚点,拉成自己想要的圆角。2.给止…

axure8.0发布html,Axure 8.0 beta最后一批新增和改进功能的介绍

之前一直想翻译Axure官方博客的这篇介绍,但一直没抽出时间,今天偶然发现ShunzUX翻译了这篇文章。阅读后觉得翻译得很准确,特别转来分享给大家。特别是On-Premises Axure Share,我之前都是翻译成『本地部署Axure Share』&#xff0…

实现option上下移动_Django实战2-自动化运维之配置管理-05:字典管理功能实现

本节内容主要实现CMDB基础数据管理功能的实现,文档中会介绍到datatables后端分页实现和过滤查询功能的实现。在Django实战1中已经自定义了 添加、修改等自定义类视图,本节中可以直接使用。1、字典管理页面实现首先来实现字段管理的基础管理页面&#xff…

用计算机对话的小品,爆笑小品剧本台词《作弊记》

小品深入生活,贴近生活,体验生活,从生活中找灵感。要用艺术的眼光去发现题材,挖掘题材。人物: 学生甲 学生乙 监考教师(教室门前)(甲乙边走边聊,乙背着书包,甲两手空空,只在上衣贴胸…

flutter ios打包_使用 Travis CI 为 Flutter 项目打包 Android/iOS 应用

Travis CI 构建Building Flutter APKs and IPAs on Travis 这篇文章详细介绍了如何在 Travis CI 上为 Flutter 项目打包 Android/iOS 应用,不过实际构建时存在几个问题,原文中的 .travis.yml 配置如下:matrix:include:- os: linuxlanguage: a…

计算机学硕专业课可以自学吗,考研专业课怎么考?高效复习法三条就够!

原标题:考研专业课怎么考?高效复习法三条就够!充足的睡眠可以使你一天精力旺盛,状态在线。好的方法可以使学习更加有效,今天从考研专业课怎么考出发,总结三条高效复习法,帮助大家有效进行考研备…

python queue查询空_【Python】多线程爬虫案例

爬取博客园文章列表爬取博客园文章列表,假设页面的URL是https://www.cnblogs.com/loaderman 要求:使用requests获取页面信息,用XPath / re 做数据提取 获取每个博客里的标题,描述,链接地址,日期等保存到 js…