一: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,通过文档查看,其中除了属性有个别差异,其它跟父项的都一样。

Logo

前往低代码交流专区

更多推荐