ElementUI使用指南(一文即可上手创建简单页面)
Element，是由国内的饿了么团队开发并开源的一套面向开发者、设计师和产品经理准备的基于 Vue 的UI组件库。
目录
一:ElementUI介绍
我依稀记得我学习计算机的时候学习css的时候，看到css的好多英语单词就头疼。立志出来工作不会接触一点css。事与愿违，终究是要沾一点点的。但是我个人也是通过ElementUI开始慢慢的开始了解了css。而ElementUI呢。是由国内的饿了么团队开发并开源的一套面向开发者、设计师和产品经理准备的基于 Vue 打造的框架(内部已经帮你写好了漂亮的css)。不仅写界面快速，调整css时学习css也特别快速(工作中不同需求需要不同样式)
二:ElementUI官网地址
ElementUI官网地址：对应Vue2使用
ElementUI-Plus官网地址：对应Vue3使用
三:ElementUI引入方式
1.CDN方式引入:
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
html代码引入使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Element使用</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<body>
<div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { }
}
})
</script>
</html>
2.npm方式：
npm i element-ui -S
命令下载后没有出现红色的Error就算下载成功。出现了就是失败。
Vue2代码引入:
//main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
四:查看引入是否成功
为了方便我会使用CDN方式引入。npm方式同理。Vue框架中main.js配置完成后通过npm启动demo。可以打开一个链接查看
通过上方CDN引入方式用浏览器打开HTML文件
1.按下F12(Edge浏览器需要同意本次开发工具打开)，打开工具栏中 网络
看网络请求中的状态(200,304)都是成功请求CDN获取到了在线网络js。就可以直接使用了
上面这个状态显示失败就是引入失败了。因为上面代码中Vue.js通过CDN引入的是及其的不稳定导致的。可以直接通过 Vue.js下载地址下载后丢到本地本且引入本地的Vue.js文件实现。
2.清理缓存并刷新(小知识)
第一次打开一个web网站。首先网站中使用到的所有资源都是需要通过网络请求去获取的。获取后浏览器会根据策略保存个别网络请求后的数据为缓存。避免你第二次请求时重复获取。这期间如果更新了代码。打开界面时不管刷新多少次看到的依旧是缓存数据。就会导致一致性问题。所以可以在F12控制台中开启停用缓存。
但是停用缓存会导致每一次刷新都是新请求，好用是好用，就是本来打开就缓慢的网页每次刷新都会加载的很慢。
所以就有一个清理缓存并刷新(先清理缓存后再刷新)
鼠标 右键 浏览器刷新按钮(任何浏览器都适用)
只有开启了F12开发者控制台才可以,未打开情况下鼠标右键是没反应的
五:ElementUI使用
1.布局容器
介绍
每个项目都应该有菜单，内容，顶部栏，底部栏吧。ElementUI提供了一个快捷的布局容器去搭建这些。
布局容器介绍
布局容器使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Element使用</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<body>
<div id="app">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { }
}
})
</script>
<style>
.el-container{
height: 100%;
}
html,body,#app{
margin: 0;
padding: 0;
height: 100%;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
</html>
这样就得到了一个基础的容器，可以在容器中写菜单，菜单搭配路由跳转界面之内的。
布局容器展示
最后运行并且刷新得到的是这样的。如果使用官网例子不稍微调整的话，他的组件不是撑满的
2.菜单
导航菜单使用
假设我要给左边加入菜单栏。流程: 打开官网->打开组件->找到符合需求的组件(没有UI组件的就不行，只能使用框架中存在的组件)->打开示例代码->复制ElementUI组件代码粘贴到自己代码中完成
<!-- 替换原代码中Aside内容，并且el-menu可以使用双向绑定 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Element使用</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<body>
<div id="app">
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { }
}
})
</script>
<style>
/* 省略.... */
</style>
</html>
导航菜单展示
熟悉UI框架的使用后，会让界面写起来非常的快速。
3.表格
表格使用
注意: 复制UI框架组件代码时 不要复制所有，而是看清楚某些代码所在位置，因为有的代码仅仅是UI放在页面中，有的代码要操纵UI组件的是放在js中的。例如表格数据展示，官网例子中数据是放在Vue中的data。
通过文中提到的组件寻找流程同样的方式找到 表格组件 并替换 布局容器 组件中的Main
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Element使用</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<body>
<div id="app">
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
})
</script>
<style>
/* 其它css省略，更改 el-main中的line-height为20px 否则表格会太大 */
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 20px;
}
</style>
</html>
表格展示
只需要略懂一点点css（不懂也可以）就可以通过UI框架去快速创建页面。
4.其它组件使用
其它组件同理，按照我所说的流程。
流程:
打开官网->打开组件->找到符合需求的组件(没有UI组件的就不行，只能使用框架中存在的组件)->打开示例代码->复制ElementUI组件代码粘贴到自己代码中完成展示
这些组件不是固定样式的。你同时可以在F12控制台寻找到组件的源代码，并且在源代码上的css上修改掉默认的css样式。可以五花八门。
六:组件属性(重点)
每个组件有不同的属性，事件，插槽以及方法。通过这几项可以对组件实现不同的效果。往往复制了一个组件后。每个组件上都有特别多的属性。例如上文中 导航菜单 中的el-menu组件。
组件上有default-active,@open,@close等属性与事件。
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"></el-menu>
使用一个Form表单组件举例：
参数，说明，类型，可选值，默认值这几项都可以在组件的文末查看到。在开发过程中碰到一些官网示例中没出现的demo。可以自行对属性进行更改使用。
同时还有Method,Event这些事件与方法可以实现对组件操作的一些逻辑。在一些官方示例中会有展示，多使用就会慢慢熟悉了。其它一些UI框架的使用方法也是同理。
针对于每个组件，在使用过程中都要查看通篇文档，对于国内开发的框架而言，我们查阅这些文档会更容易理解。官方文档是最好的文档。没有那一篇文章能够对比👍
Form表单方法与事件
组件属性放在组件上
组件方法:获取组件的this实例，通过实例调用方法。具体可以查看 Form表单组件 中 “数字类型验证” 里有使用到 “resetFields” 方法
组件插槽:可以实现自定义需求。
其它:有的组件会有子项，例如 Form表单组件 的 Form-Item，通过文档查看，其中除了属性有个别差异，其它跟父项的都一样。
前往低代码交流专区
更多推荐
18
0- 0
已为社区贡献1条内容
所有评论(0)