目录
2.2.1 引入需要的资源：element所用到的样式、组件库、和vue（vue3不支持element的使用）
2.2.2 将上述分析Element官网的那段轮播图代码复制到相应的位置。
前言
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。
注：必须在vue知识掌握的情况下才能看懂会去运用Element组件。也可去看我的vue文章先进行学习哦~Vue必备知识点(简单+快速上手Vue)_心态还需努力呀的博客-CSDN博客_学vue前应该会那些东西
一、Element特性
![Vue+Element组件的使用[快速开发好看实用的页面]](https://img-blog.csdnimg.cn/326cf5132d5e4fcaaa8bb9dad917d932.png)
![Vue+Element组件的使用[快速开发好看实用的页面]](https://www.bmabk.com/wp-content/uploads/2022/05/post-loading.gif)
一致性 Consistency
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈 Feedback
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
效率 Efficiency
- 简化流程：设计简洁直观的操作流程；
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
可控 Controllability
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
具体详细内容可查看官网：
Element – The world’s most popular Vue UI framework
二、用法（以页面编写轮播图为例）
2.1 打开Element组件官网
这里我们先打开组件，然后找到Carousel走马灯，选择以卡片化为例。 如下图所示：
![Vue+Element组件的使用[快速开发好看实用的页面]](https://img-blog.csdnimg.cn/e4f7f9953a2a4982a14f3dd353bc81d6.png)
然后我们在卡片化下面点击显示代码：
下述代码中带有<template>放到vue的挂载点里才能生效
<style>就把代码放到你的样式里
![Vue+Element组件的使用[快速开发好看实用的页面]](https://img-blog.csdnimg.cn/97eb9435b3114fb49c6f42d32d986eeb.png)
2.2 正式写代码
创建一个vue模板然后进行以下操作：
2.2.1 引入需要的资源：element所用到的样式、组件库、和vue（vue3不支持element的使用）
<!-- 1.导入vue+element -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>2.2.2 将上述分析Element官网的那段轮播图代码复制到相应的位置。
运行后得到下图：
![Vue+Element组件的使用[快速开发好看实用的页面]](https://img-blog.csdnimg.cn/6dba4478fa2e4077b0f962b4e957b4bd.png)
2.2.3 修改代码，将数字换成图片资源
![Vue+Element组件的使用[快速开发好看实用的页面]](https://img-blog.csdnimg.cn/257e9fed2b6b42cf99edd22a52856990.png)
2.2.4 运行效果图
![Vue+Element组件的使用[快速开发好看实用的页面]](https://img-blog.csdnimg.cn/b15b9771af0f434eb113bf9d1c2fb944.png)
可看到图片就已经插进去了。具体的宽高自己可以调，这里就不展示了。
三、全部代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用Element组件--心态</title>
<!-- 1.导入vue+element -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css">
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
</head>
<body>
<div id="app" class="app">
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 5" :key="item">
<!-- <h3 class="medium">{{ item }}</h3> -->
<img :src="imgList[item]" width="100%" height="100%">
</el-carousel-item>
</el-carousel>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
imgList: ["img/t1.png", "img/t2.png", "img/t3.png", "img/t4.png", "img/t5.png", "img/t6.png"],
}
})
</script>
</body>
</html>
总结
这就是Vue+Element组件的使用，可以方便我们学后端的开发简单的页面，只需要cv改改代码即可成为自己的代码。但这其中vue知识点是需要我们掌握的，如果vue知识点你不知道的话很难去运用element。所以说没学vue的赶快学起来吧。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/114640.html
