devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ElementUI使用指南(一文即可上手创建简单页面)_element ui

作者：IT小白 | 2024-06-21 22:25:04

赞

踩

element 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>

  • 1
  • 2
  • 3
  • 4

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

2.npm方式：

npm i element-ui -S

  • 1

命令下载后没有出现红色的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)
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

四:查看引入是否成功

为了方便我会使用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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

这样就得到了一个基础的容器，可以在容器中写菜单，菜单搭配路由跳转界面之内的。

布局容器展示

最后运行并且刷新得到的是这样的。如果使用官网例子不稍微调整的话，他的组件不是撑满的
在这里插入图片描述

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74

导航菜单展示

熟悉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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91

表格展示

在这里插入图片描述
只需要略懂一点点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>

  • 1

使用一个Form表单组件举例：
参数，说明，类型，可选值，默认值这几项都可以在组件的文末查看到。在开发过程中碰到一些官网示例中没出现的demo。可以自行对属性进行更改使用。
同时还有Method,Event这些事件与方法可以实现对组件操作的一些逻辑。在一些官方示例中会有展示，多使用就会慢慢熟悉了。其它一些UI框架的使用方法也是同理。
针对于每个组件，在使用过程中都要查看通篇文档，对于国内开发的框架而言，我们查阅这些文档会更容易理解。官方文档是最好的文档。没有那一篇文章能够对比

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/744431
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。