Element-UI简单使用

瑞的菜鸟编程之路

已于 2022-09-11 20:20:22 修改

阅读量1k

点赞数 1

分类专栏： Vue 文章标签： ui vue.js 前端

于 2022-09-11 05:32:24 首次发布

本文链接：https://blog.csdn.net/m0_63926154/article/details/126801839

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Element UI 是饿了么前端团队为Vue.js2.0打造的桌面端UI框架，其提供了丰富的组件库。本文介绍了Element的基础使用，包括通过CDN引入样式和组件库，以及一个简单的表格组件示例。建议在项目中按需引入组件并锁定版本以避免更新带来的不兼容问题。

摘要由CSDN通过智能技术生成

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>