Element-简单使用

一、介绍Element-UI

ElementUI中文网 ：https://element.eleme.cn/#/zh-CN

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。

我是学后端的在学习Vue时候了解到Element，我使用Element主要是为了从里面使用各种组件

二、入门

1.安装：

通过CDN安装，我们也可以把他们下载下来，注意它是配置Vue使用的所以Vue.js也是需要的

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<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>

官方建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

三、简单使用

在这里插入图片描述

  • 项目代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入Vue.js -->
		<script type="text/javascript" src="js/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="container">
			<!-- 引入组件模板 -->
			<template>
				<el-table :data="stus" style="width: 100%">
					<el-table-column prop="stuNum" label="学号" width="180"></el-table-column>
					<el-table-column prop="stuName" label="姓名" width="180"></el-table-column>
					<el-table-column prop="address" label="地址"></el-table-column>
				</el-table>
			</template>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#container",
				data: {
					stus: [{
						stuNum: '1001',
						stuName: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}, {
						stuNum: '2016-05-04',
						stuName: '张三',
						address: '上海市普陀区金沙江路 1517 弄'
					}, {
						stuNum: '2016-05-01',
						stuName: '李四',
						address: '上海市普陀区金沙江路 1519 弄'
					}, {
						stuNum: '2016-05-03',
						stuName: '王五',
						address: '上海市普陀区金沙江路 1516 弄'
					}]
				}
			});
		</script>
	</body>
</html>
  • 效果

在这里插入图片描述

这里就简单演示如何使用一个组件，在项目中我们需要什么组件来找一下，照猫画虎即可，如果要深入学习还是要参考官方文档来学习

# ui # vue.js # 前端
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign