Element快速上手!

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

官网链接:

Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://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.引入资源

html 复制代码
<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核心对象

html 复制代码
<!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相一致~

相关推荐
前端开发与ui设计的老司机12 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人15 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景36 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端