Vue入门到关门之第三方框架elementui

1、什么是ElementUI?

Element UI 是一个基于 Vue.js 的组件库,它提供了丰富的 UI 组件和一套完整的解决方案,用于快速构建现代化的 Web 应用程序。Element UI 的目标是帮助开发者快速构建出美观、易用的界面,并提供了丰富的组件,包括但不限于按钮、表单、表格、对话框、菜单、导航、布局等等。

Element UI 的特点包括:

  1. 丰富的组件: Element UI 提供了大量的常用 UI 组件,开发者可以通过简单的引入和配置,快速构建出符合现代界面设计的 Web 应用。

  2. 易用性: 组件设计符合用户习惯,提供了丰富的交互细节和动画效果,使得开发者可以轻松地构建出用户友好的界面。

  3. 响应式设计: Element UI 的组件支持响应式设计,能够适应不同尺寸的屏幕,从而提供良好的移动端和桌面端用户体验。

  4. 主题定制: Element UI 提供了灵活的主题定制功能,开发者可以根据自己的需求定制组件的外观和风格。

总的来说,Element UI 是一个功能丰富、易用且灵活的 Vue.js 组件库,为开发者提供了丰富的工具和组件,帮助他们快速构建出现代化的 Web 应用程序。

2、Element UI的官方网站

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

  • https://element.eleme.cn/#/zh-CN

3、Element UI的使用

(1)安装

在Vue项目中使用ElementUI,需要进行以下配置步骤:

  • 在项目中安装

    cnpm install element-ui -S
    

(2)项目中配置

在main.js配置:

  • 导入ElementUI对象:
    • 使用import ElementUI from 'element-ui'将ElementUI对象引入。
  • 引入ElementUI样式:
    • 使用import 'element-ui/lib/theme-chalk/index.css'引入ElementUI的样式。
// 导入ElementUI对象
import ElementUI from 'element-ui';       
// 引入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css'; 
  • 注册ElementUI组件:

    • 在main.js文件中,通过Vue.use(ElementUI)全局注册ElementUI组件,并使其可在所有的Vue组件中使用。
    Vue.use(ElementUI)
    

这样配置完成后,就可以在项目中直接使用ElementUI提供的组件和样式了。如果在其他组件中看到了喜欢的ElementUI的样式效果,可以直接复制相关的HTML、CSS和JavaScript代码来使用。

(3)使用

示例:

<template><div class="Element"><h1>栅格</h1><el-row :gutter="20"><el-col :span="16"><div class="left"></div></el-col><el-col :span="8"><div class="right"></div></el-col></el-row><el-row :gutter="20"><el-col :span="12" :offset="6"><div class="center"></div></el-col></el-row><h2>布局容器</h2><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container><h1>小图标</h1><span class="el-icon-video-camera">打开摄像机</span><h1>按钮</h1><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><h1>链接文字</h1><div><el-link href="https://element.eleme.io" target="_blank">默认链接</el-link><br><el-link type="primary">主要链接</el-link><el-link type="success">成功链接</el-link><el-link type="warning">警告链接</el-link><el-link type="danger">危险链接</el-link><el-link type="info">信息链接</el-link></div><h1>单选</h1><div><el-radio-group v-model="radio1"><el-radio-button :label="item" v-for="item in citys" border="false"></el-radio-button></el-radio-group></div><h1>多选</h1><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><div style="margin: 15px 0;"></div><el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group><h1>input</h1><div class="demo-input-suffix">属性方式:<el-inputplaceholder="请选择日期"suffix-icon="el-icon-date"></el-input><el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"></el-input></div><div class="demo-input-suffix">slot 方式:<el-inputplaceholder="请选择日期"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input><el-inputplaceholder="请输入内容"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input></div><h1>表格</h1><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table><h1>message提示</h1><el-button :plain="true" @click="open4">错误</el-button><h1>警告</h1><el-button :plain="true" @click="open">错误</el-button></div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {name: 'Element',data(){return {// citys:['上海','北京','天剑'],// radio1:'上海',checkAll: false,checkedCities: ['上海', '北京'],cities: cityOptions,isIndeterminate: true,tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}},methods:{handleCheckAllChange(val) {this.checkedCities = val ? cityOptions : [];this.isIndeterminate = false;},handleCheckedCitiesChange(value) {let checkedCount = value.length;this.checkAll = checkedCount === this.cities.length;this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;},tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';},open4(){this.$message({message: '恭喜你,这是一条成功消息',type: 'success'});},open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}}}
</script><style scoped>
.left{background-color: aqua;height: 200px;
}
.right{background-color: pink;height: 200px;
}
.center{background-color: green;height: 200px;
}.el-header{height: 50px;background-color: rebeccapurple;
}
.el-aside{height: 700px;background-color: aquamarine;
}
.el-main{height: 500px;background-color: #67C23A;
}
.el-footer{height: 200px;background-color: blue;
}
.el-table .warning-row {background: oldlace;
}.el-table .success-row {background: #f0f9eb;
}
</style>

4、总结

(1) 安装:cnpm i element-ui -S
(2) 集成到项目:main.js 中加入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 使用插件
(3) 去官网,找样式,复制,粘贴  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/6749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

四种粒子群算法的Matlab实现

粒子群算法&#xff0c;又称为粒子群优化&#xff08;Particle Swarm Optimization&#xff0c;简称PSO&#xff09;&#xff0c;是一种基于群体智能的优化算法。它最初由James Kennedy和Russell Eberhart于1995年提出&#xff0c;灵感来源于鸟群捕食行为的研究。在PSO中&#…

R语言实战——中国职工平均工资的变化分析——相关与回归分析

链接: R语言学习—1—将数据框中某一列数据改成行名 R语言学习—2—安德鲁斯曲线分析时间序列数据 R语言学习—3—基本操作 R语言学习—4—数据矩阵及R表示 R语言的学习—5—多元数据直观表示 R语言学习—6—多元相关与回归分析 1、源数据 各行业平均工资变化 各地区平均工资…

list 的模拟实现

目录 1. list 的实现框架 2. push_back 3. 迭代器 4. constructor 4.1. default 4.2. fill 4.3. range 4.4. initializer list 5. insert 6. erase 7. clear 和 destructor 8. copy constructor 9. operator 10. const_iterator 10.1. 普通人的处理方案 10.2. …

运维的边缘计算

运维的边缘计算是指在靠近物或数据源头的一侧&#xff0c;采用网络、计算、存储、应用核心能力为一体的开放平台&#xff0c;进行运维管理和服务的计算模式。具体来说&#xff0c;边缘计算在运维领域的应用主要体现在以下几个方面&#xff1a; 超低时延&#xff1a;在传统的云…

数据库复习1

1.试述数据、数据库、数据库管理系统、数据库系统的概念 1.数据(Data): 数据是关于事物的符号表示或描述。它可以是任何事实、观察或者测量的结果&#xff0c;如数字、字符、声音、图像等。数据在没有上下文的情况下可能没有明确的意义。 2.数据库(Database): 数据库是一个持…

Linux——socket编程之tcp通信

前言 前面我们学习socket的udp通信&#xff0c;了解到了socket的概念与udp的实现方法&#xff0c;今天我们来学习一下面向连接的tcp通信。 一、tcp套接字创建 UDP和TCP都是通过套接字&#xff08;socket&#xff09;来实现通信的&#xff0c;因此TCP也得使用socket()接口创建…

时间复杂度_空间复杂度

时间复杂度_空间复杂度 1.算法效率 算法效率分析分为两种:第一种是时间效率&#xff0c;第二种是空间效率。 时间效率被称为时间复杂度&#xff0c;而空间效率被称作空间复杂度。时间复杂度主要衡量的是一个算法的运行速度&#xff0c;而空间复杂度主要衡量一个算法所需要的…

vue什么是服务端渲染(SSR)

Vue服务端渲染&#xff08;SSR&#xff09;在优化SEO方面有着显著的优势&#xff0c;因为它允许搜索引擎直接访问服务器渲染的页面&#xff0c;从而更容易解析页面内容。以下是一些关于如何使用Vue SSR优化SEO的建议&#xff1a; 为每个URL生成静态HTML&#xff1a;Vue SSR允许…

达摩院 2025届暑期实习 大模型算法

文章目录 写在前面一面/技术面 2024/4/7 晚上19:00-20:00二面/技术面 2024/4/23 早上11:15-12:15 写在前面 学校情况&#xff1a;211本中9硕&#xff0c;本硕都是计算机科班&#xff0c;但研究方向并不是NLP&#xff0c;而是图表示学习论文情况&#xff1a;1A(NeurIPS)1B(ICDM…

C#技巧之同步与异步

区别 首先&#xff0c;同步就是程序从上往下顺序执行&#xff0c;要执行完当前流程&#xff0c;才能往下个流程去。 而异步&#xff0c;则是启动当前流程以后&#xff0c;不需要等待流程完成&#xff0c;立刻就去执行下一个流程。 同步示例 创建一个窗体&#xff0c;往窗体里…

面试 Java 基础八股文十问十答第二十八期

面试 Java 基础八股文十问十答第二十八期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;动态代理是什么&am…

2131 - 枚举-练习-涂国旗

2131 - 枚举-练习-涂国旗 c刷题 超能力编程 分析 枚举涂w的底边和涂b的底边即可 剩下的部分都涂r 数据范围这么小,暴力枚举&#xff0c;代码简单难度低。搜索什么的用不着啦&#xff01; 那么问题来了&#xff1a;怎么枚举呢&#xff1f; 我们只要枚举白与蓝、蓝与红的边界&…

【SQL基础】mysql中如何将日期时间类型转换为日期类型

在MySQL中&#xff0c;将DATETIME类型的数据转换为日期格式可以通过使用DATE()函数来实现。DATE()函数可以从DATETIME或TIMESTAMP类型的值中提取出日期部分。 以下是几种将DATETIME转换为日期格式的示例&#xff1a; 直接转换DATETIME列为日期&#xff1a; SELECT DATE(date…

Containerd方式部署K8s集群

1.1 Kubernetes基础环境部署 kubernetes有多种部署方式&#xff0c;目前主流的方式有kubeadm、minikube、二进制包 minikube&#xff1a;一个用于快速搭建单节点kubernetes的工具 kubeadm&#xff1a;一个用于快速搭建kubernetes集群的工具 二进制包 &#xff1a;从官网下载…

【DPU系列之】DPU中的ECPF概念是什么?全称是什么?(E CPF对标H CPF;embedded CPU function ownership)

ECPF&#xff1a;embedded CPU function ownership。 嵌入式CPU运转ownership。也叫DPU模式&#xff0c;是DPU工作运转3种模式之一&#xff0c;也是默认的模式。这里的嵌入式CPU指的是DPU上ARM CPU&#xff0c;表示网卡所有资源和功能被embedded CPU全权管理&#xff0c;行使所…

【动态规划】投资问题

本文利用markdown基于https://blog.csdn.net/qq_41926985/article/details/105627049重写,代码部分为本人编辑 代码要求 应用动态规划方法&#xff0c;求解投资问题&#xff0c;实现下面的例子。 #define MAX_N 4 //最大投资项目数目 #define MAX_M 5 //最大投资钱数(万元) /…

【机器视觉】yolo-world-opencvsharp-.net4.8 C# 窗体应用程序

这段代码是基于 OpenCvSharp, OpenVinoSharp 和 .NET Framework 4.8 的 Windows Forms 应用程序。其主要目的是加载和编译机器学习模型&#xff0c;对输入数据进行推理&#xff0c;并显示结果。 下面是该程序的主要功能和方法的详细总结&#xff1a; 初始化 OpenVINO 运行时核心…

基于Pytorch深度学习——卷积神经网络(卷积层/池化层/多输入多输出通道/填充和步幅/)

本文章来源于对李沐动手深度学习代码以及原理的理解&#xff0c;并且由于李沐老师的代码能力很强&#xff0c;以及视频中讲解代码的部分较少&#xff0c;所以这里将代码进行尽量逐行详细解释 并且由于pytorch的语法有些小伙伴可能并不熟悉&#xff0c;所以我们会采用逐行解释小…

【DPU系列之】如何通过带外口登录到DPU上的ARM服务器?(Bluefield2举例)

文章目录 1. 背景说明2. 详细操作步骤2.1 目标拓扑结构2.2 连接DPU带外口网线&#xff0c;并获取IP地址2.3 ssh登录到DPU 3. 进一步看看系统的一些信息3.1 CPU信息&#xff1a;8核A723.2 内存信息 16GB3.3 查看ibdev设备 3.4 使用小工具pcie2netdev查看信息3.5 查看PCIe设备信息…

python笔记:gensim进行LDA

理论部分&#xff1a;NLP 笔记&#xff1a;Latent Dirichlet Allocation &#xff08;介绍篇&#xff09;-CSDN博客 参考内容&#xff1a;DengYangyong/LDA_gensim: 用gensim训练LDA模型&#xff0c;进行新闻文本主题分析 (github.com) 1 导入库 import jieba,os,re from ge…