Element快速上手!

Element是饿了么公司前端团队开发的一套基于Vue的组件库,用于快速构建网页~

官网链接:

Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库icon-default.png?t=N7T8https://element.eleme.cn/#/zh-CN 

一.使用

1.下载资源

ElementUI快速上手(jar包本地下载)_element-ui不会下载-CSDN博客文章浏览阅读1w次,点赞19次,收藏55次。Element-ui是饿了么前端团队推出的基于vue进行开发的前端框架。最近刚学了Element-ui,迫不及待练练手,却发现现成的组件样式用不了。引用官网的使用方法,如图:展示的效果也是不尽人意,在百度的过程中发现可能是链接引用不稳定,访问很慢。后来又网上的教程一步一步设置,结果又出现了很多意想不到的问题。在看了很多大牛的视频后,才发现这么简单!!!教程如下:1.既然是基于vue的框架,首先要导入vue.js的架包。链接:安装 Vue.js在学习阶段建议使用开发版本。2.接_element-ui不会下载https://blog.csdn.net/qq_58861683/article/details/124553429?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171533372416777224489857%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=171533372416777224489857&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-124553429-null-null.142^v100^pc_search_result_base3&utm_term=ELementUI%E4%B8%8B%E8%BD%BD&spm=1018.2226.3001.4187Vue.js之前讲解过如何引入,这里不再赘述。除此之外还需要引入一些ELementUI的样式与逻辑文件,请通过上方的讲解自行下载。

2.引入资源

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

目录仅供参考。 

3.创建vue核心对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="js/vue.js"></script>
<script>new Vue({el:"#app",data(){return{}}});
</script>
</body>
</html>

基础页面如上, 记得要创建一个核心对象。

二.布局

1.Layout布局

2.Container布局

注:组件内容自行去官网查询,至于绑定数据的技巧和vue相一致~

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

arp icmp 等报文格式

ARP报文格式 ARP是一个独立的三层协议&#xff0c;所以ARP报文在向数据链路层传输时不需要经过IP协议的封装&#xff0c;而是直接生成自己的报文&#xff0c;其中包括ARP报头&#xff0c;到数据链路层后再由对应的数据链路层协议&#xff08;如以太网协议&#xff09;进行封装…

Gradient发布支持100万token的Lllama3,上下文长度从8K扩展到1048K

前言 近日Gradient公司在Crusoe Energy公司的算力支持下&#xff0c;开发了一款基于Llama-3的大型语言模型。这款新模型在原Llama-3 8B的基础上&#xff0c;将上下文长度从8000 token大幅扩展到超过104万token。 这一创新性突破&#xff0c;展现了当前SOTA大语言模型在长上下…

【JVM基础篇】JVM入门介绍

JVM入门介绍 为什么学习JVM 岗位要求 解决工作中遇到的问题 性能调优 真实案例 导出超大文件&#xff0c;系统崩溃从数据库中查询超大量数据出错消费者消费来不及导致系统崩溃Mq消息队列接受消息导致的内存泄漏业务高峰期系统失去响应 初识JVM 什么是JVM&#xff1f; JV…

Excel——项目管理,设置时间到期自动提醒及颜色高亮

效果图 第一步、自动获取合同到期日期 1、首先合同【签约日期】和【到期日期】下面的数据必须是日期格式&#xff0c;不能是其它的格式否则无法计算&#xff0c;如果是其它格式需要转换成标准的日期格式&#xff0c;如下图所示。 2、在“到期日期”下面的第一个单元格中输入公…

【Web后端】web后端开发简介_Servlet简介

1.web后端开发简介 Java企业级开发&#xff0c;也就是学习]avaEE(Enterprise Edition)版本,是一种结构和一套标准。在应用中开发的标准就是Servlet、jsp和JavaBean技术。jsp技术现在已基本处于淘汰状态&#xff0c;简单了解即可web后端开发&#xff0c;基于B/S模式的开发体系。…

【系统架构师】-选择题(十二)计算机网络

1、网闸的作用&#xff1a;实现内网与互联网通信&#xff0c;但内网与互联网不是直连的 2、管理距离是指一种路由协议的路由可信度。15表示该路由信息比较可靠 管理距离越小&#xff0c;它的优先级就越高&#xff0c;也就是可信度越高。 0是最可信赖的&#xff0c;而255则意味…

智能奶柜:健康生活新风尚

智能奶柜&#xff1a;健康生活新风尚 在快节奏的都市生活中&#xff0c;健康与便利成为了现代人的双重追求。而在这两者交汇之处&#xff0c;智能奶柜应运而生&#xff0c;它不仅是科技与生活的完美融合&#xff0c;更是日常营养补给的智慧之选。 清晨的第一缕温暖 —— 新鲜…

Ansible-Playbook通过role角色部署Lnmp架构

目录​​​​​​​ 一、配置Nginx的Roles角色 1.1编写files/default.conf 1.2编写files/nginx.repo 1.3编写handlers/main.yml 1.4编写tasks/main.yml文件 1.5编写vars/main.yml文件 1.6测试运行结果&#xff0c;并不是真的执行任务 二、配置Mysql的Roles角色 2.1编写…

Go实现树莓派I2C读取SHT30温度湿度传感器

简介 树莓派其实本身包含很多资源引脚&#xff0c; 合理利用其实可以自制智能家居的一部分&#xff0c;本身硬件和Linux系统等高级语言支持加生态&#xff0c; 不说了&#xff0c; 做就好了… I2C 功能开启 参考之前的文章就可以了 Go实现树莓派读取bh1750光照强度 查看I2C总…

(Java)心得:LeetCode——5.最长回文子串

一、原题 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba"…

网页版Figma汉化

最近学习Figma&#xff0c;简单介绍一下网页版Figma的汉化方法 1.打开网址&#xff1a;Figma软件汉化-Figma中文版下载-Figma中文社区 2.下载汉化插件离线包 解压汉化包 3.点开谷歌的管理扩展程序 4.点击加载已解压的扩展程序&#xff0c;选择刚刚解压的包 这样就安装好了汉化…

厚德提问大佬答4:AI绘画生成的心得

遇到难题不要怕&#xff01;厚德提问大佬答&#xff01; 厚德提问大佬答 你是否对AI绘画感兴趣却无从下手&#xff1f;是否有很多疑问却苦于没有大佬解答带你飞&#xff1f;从此刻开始这些问题都将迎刃而解&#xff01;你感兴趣的话题&#xff0c;厚德云替你问&#xff0c;你解…

2019年计算机真题

2019年计算机真题 离散数学 一、用逻辑符号表达下列语句(论域为包含一切事物的集合) 1&#xff09;过平面上的两个点&#xff0c;有且仅有一条直线通过。 解: (1) P ( x , y ) : x , y \mathrm{P}_{(\mathrm{x}, \mathrm{y})}: \mathrm{x}, \mathrm{y} P(x,y)​:x,y 是平面上的…

Git泄露(续)

接上一篇补充 git config --global user.name " " git config --global user.email 邮箱地址 配置用户名和邮箱 git commit 使其处于交互区&#xff0c;没有使用 -m&#xff0c;默认用vim 来编辑和提交信息 输入要提交的内容&#xff0c;然后按ESC建回到命令…

智慧仓储可视化大屏,以最直观的形式展示海量数据。

智慧仓储可视化大屏是一种通过数据可视化技术&#xff0c;将仓储管理系统中的海量数据以图表、地图、仪表盘等形式直观展示在大屏上的解决方案。它可以帮助仓储管理人员更清晰地了解仓库的运营情况&#xff0c;从而做出更明智的决策。 智慧仓储可视化大屏通常包括以下功能和特点…

github删除自己的仓库

测试Github的时候新建了很多仓库&#xff0c;但是后来想删除&#xff0c;找了半天居然没有找到按钮。 我就推测这个删除的功能肯定藏起来了&#xff0c;后来度娘了一下&#xff0c;发现果然在一个比较隐蔽的位置&#xff0c;不知道以后这个功能会不会改到一个比较明显的位置吧…

高效工作之软件系统——数据结构登记表

数据结构模板 开发完软件系统后&#xff0c;往往需要进行一些登记——《软件系统数据结构登记表》 然后软件项目有60个表左右&#xff0c;难道需要手动录入&#xff0c;那肯定不可能 工欲善其事必先利其器&#xff01;go。。。同事给的模板是下图 效果图 于是想到 之前使用…

Java代理Ⅱ

目录 静态代理的内存结构图 测试demo 内存图 关于为什么不能直接修改原方法&#xff0c;而是要用代理 参考文章 关于代理我之前写过一篇博客&#xff0c;基本已经讲的差不多了&#xff0c;有兴趣的读者可以去看看 Java代理 最近有了新的感悟&#xff0c;所以记录一下 静…

基于springboot实现毕业设计系统项目【项目源码+论文说明】

基于springboot实现毕业设计系统演示 摘要 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以&#xff…

文本三剑客grep与正则表达式、元字符

正则表达式 正则表达式又称为正规表达式、常规表达式、在代码中常简写为regex、regex或RE。正则表达式是使用单个字符串来描述、匹配一系列符合某个句法规则的字符串&#xff0c;简单来说&#xff0c;是一种匹配字符串的方法&#xff0c;通过一些特殊符号&#xff0c;实现快速查…