Element-UI简单使用_element-ul

作者：Gausst松鼠会 | 2024-02-16 22:43:56

踩

element-ul

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>
1
2
3
4

官方建议使用 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>
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

效果

在这里插入图片描述

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

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