【Element-ui】Element-ui是什么?如何安装

文章目录

  • 前言
  • 一. 什么是Element UI?
  • 二. 安装Element UI
    • 2.1 安装方法1
    • 2.2 安装方法2
  • 三、引入Element
    • 3.1 完整引入
    • 3.2 按需引入
  • 总结


前言

在Web开发中,使用现成的UI组件库能够极大地提高开发效率。而Element UI(饿了么团队开发的一套基于Vue.js的UI组件库)就是其中备受欢迎的一款。Element UI提供了丰富的组件,使得前端开发者能够轻松地创建漂亮且功能强大的用户界面。在本文中,我们将介绍Element UI是什么,以及如何安装和使用它。


一. 什么是Element UI?

Element UI是一个基于Vue.js的开源UI组件库,专为开发者提供了一套优雅而灵活的UI组件。它包含了各种常用的Web组件,如按钮、表单、导航等,以及高级组件,如日期选择器、对话框等。Element UI的设计风格简洁美观,易于定制,使其成为许多Vue.js项目的首选UI框架。

二. 安装Element UI

2.1 安装方法1

安装Element UI非常简单,你只需要执行几个命令即可。首先,确保你的项目中已经安装了Vue.js。然后,在项目目录中打开终端,执行以下命令:

# 使用npm安装
npm install element-ui# 或者使用yarn安装
yarn add element-ui

注意:如果安装进程一直没变在,像停在某个界面,可以试试更换成淘宝的源,输入下面:

npm config set registry https://registry.npm.taobao.org

配置可通过下面方式验证是否成功:

npm config get registry

更换安装源后再输入安装命令即可:

npm i element-ui -S

2.2 安装方法2

方法二:CDN引入

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

注:可以通过unpkg.com/element-ui获取到最新版本的资源,在页面上结合js和css文件即可开始使用

三、引入Element

3.1 完整引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

3.2 按需引入

第一步:安装 babel-plugin-component:

npm install babel-plugin-component -D

第二步:将 .babelrc 修改为:

{"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

第三步:在 main.js 中根据自己需要的组件写入相应的内容(例如:引入Button组件):

import Vue from 'vue';
import { Button} from 'element-ui';
import App from './App.vue';Vue.component(Button.name, Button);
/* 或写为* Vue.use(Button)*/new Vue({el: '#app',render: h => h(App)
});

完整组件列表和引入方式:

import Vue from 'vue';
import {Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,Tooltip,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,TabPane,Tag,Tree,Alert,Slider,Icon,Row,Col,Upload,Progress,Spinner,Badge,Card,Rate,Steps,Step,Carousel,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Timeline,TimelineItem,Link,Divider,Image,Calendar,Backtop,PageHeader,CascaderPanel,Loading,MessageBox,Message,Notification
} from 'element-ui';Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);Vue.use(Loading.directive);Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

总结

Element UI是一款强大而灵活的Vue.js UI组件库,可以极大地简化Web开发的过程。通过本文,我们了解了Element UI是什么,如何安装它,以及如何在Vue项目中引入和使用它。使用Element UI,你可以更加轻松地创建出美观而功能强大的用户界面,提升开发效率。希望你能在你的下一个项目中尝试使用Element UI,并享受其带来的便利。

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

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

相关文章

锐捷EWEB网管系统 RCE漏洞复现

0x01 产品简介 锐捷网管系统是由北京锐捷数据时代科技有限公司开发的新一代基于云的网络管理软件&#xff0c;以“数据时代创新网管与信息安全”为口号&#xff0c;定位于终端安全、IT运营及企业服务化管理统一解决方案。 0x02 漏洞概述 Ruijie-EWEB 网管系统 flwo.control.ph…

定时任务特辑 | Quartz、xxl-job、elastic-job、Cron四个定时任务框架对比,和Spring Boot集成实战

专栏集锦&#xff0c;大佬们可以收藏以备不时之需&#xff1a; Spring Cloud 专栏&#xff1a;http://t.csdnimg.cn/WDmJ9 Python 专栏&#xff1a;http://t.csdnimg.cn/hMwPR Redis 专栏&#xff1a;http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏&#xff1a;http://t.csdni…

Docker从入门到实战:Docker快速部署、Dockerfile编写、容器间通信及共享数据实战、Docker-compose详解

文章目录 一、基本概念1、体系结构2、容器与镜像1&#xff09;镜像2&#xff09;容器a、容器内部结构b、容器生命周期 3、执行流程 二、常用命令docker pull 镜像名<:tags> &#xff1a;从远程仓库抽取镜像docker images&#xff1a;查看本地镜像docker run 镜像名<:t…

达梦8搭建DataWatch集群

一、集群配置 官方文档本次配置集群需要两台服务器主库&#xff1a;dmdw1&#xff0c;10.0.0.100备库&#xff1a;dmdw2&#xff0c;10.0.0.110确认监视器&#xff1a;10.0.0.110普通监视器&#xff1a;10.0.0.100 二、初始化数据库 2.1 主库执行 su - dmdba cd /opt/dmdbm…

利用Python爬虫爬取豆瓣电影排名信息

可以使用第三方库Beautiful Soup和Requests来编写一个简单的爬虫&#xff0c;从豆瓣电影Top100页面获取信息 import requests from bs4 import BeautifulSoupdef get_douban_top100():url https://movie.douban.com/top250headers {User-Agent: Mozilla/5.0 (Windows NT 10.…

C++11入门

目录 C11简介 统一的列表初始化 声明 范围for循环 STL中一些变化 C11简介 在2003年C标准委员会提交了一份技术勘误表(简称TC1).使得C03这个名字取代了C98成为C11之前的最新C标准名称.但由于C03主要是对C98标准中的漏洞进行修复,语言的核心部分则没有改动,因此人们习惯的把…

给定一组经纬度如何判断某点是否在这组经纬度的范围之内(电子围栏实现代码)

方法一&#xff1a; 使用JTS Topology Suite 是 Java 的空间数据模型和空间分析操作的库&#xff0c;用于处理地理空间数据和进行空间分析。 1.1引入maven <dependency><groupId>org.locationtech.jts</groupId><artifactId>jts-core</artifactId…

代数学笔记6: 群同态基本定理,循环群结构定理

群同态 ρ : G 1 ( , ⋅ ) → G 2 ( , ∘ ) g ↦ ρ ( g ) \rho:G_1(\ ,\cdot)\to G_2(\ ,\circ)\\ \qquad\ \ g\mapsto \rho(g) ρ:G1​( ,⋅)→G2​( ,∘) g↦ρ(g) ∀ g 1 , g 2 ∈ G \forall g_1,g_2\in G ∀g1​,g2​∈G, 有 ρ ( g 1 ⋅ g 2 ) ρ ( g 1 ) ∘ ρ ( g 2 …

解决报错:error: (-215:Assertion failed) inv_scale_x > 0 in function ‘cv::resize‘

需求背景 欲使用opencv的resize函数将图像沿着纵轴放大一倍&#xff0c;即原来的图像大小为(384, 512), 现在需要将图像放大为(768, 512)。 源码 import cv2 import numpy as np# 生成初始图像 img np.zeros((384, 512), dtypenp.uint8) img[172:212, 32:-32] 255 H, W …

卷积神经网络-3D医疗影像识别

文章目录 一、前言二、前期工作1. 介绍2. 加载和预处理数据 二、构建训练和验证集三、数据增强四、数据可视化五、构建3D卷积神经网络模型六、训练模型七、可视化模型性能八、对单次 CT 扫描进行预测 一、前言 我的环境&#xff1a; 语言环境&#xff1a;Python3.6.5编译器&a…

题目:DNA序列修正(蓝桥OJ 3904)

题目描述&#xff1a; 解题思路&#xff1a; 从左到右扫描第一条 DNA 序列和第二条 DNA 序列的每一个位置&#xff0c;检查它们是否互补。 如果某个位置不互补&#xff0c;我们需要寻找第二条 DNA 序列中后续位置的碱基&#xff0c;看是否可以通过交换使这两个位置都互补。如果…

〖大前端 - 基础入门三大核心之JS篇㊹〗- DOM事件委托

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

ssl下载根证书和中间证书

为了保证客户端和服务端通过HTTPS成功通信&#xff0c;您在安装SSL证书时&#xff0c;也需要安装根证书和中间证书。本文介绍如何获取根证书和中间证书。 使用说明 如果您的业务用户通过浏览器访问您的Web业务&#xff0c;则您无需关注根证书和中间证书&#xff0c;因为根证书…

ELK高级搜索,深度详解ElasticStack技术栈-下篇

前言&#xff1a;ELK高级搜索&#xff0c;深度详解ElasticStack技术栈-上篇 14. search搜索入门 14.1. 搜索语法入门 14.1.1 query string search 无条件搜索所有 GET /book/_search结果&#xff1a; {"took" : 969,"timed_out" : false,"_shar…

头歌JUnit单元测试相关实验进阶

JUnit是一个由 Erich Gamma 和 Kent Beck 编写的一个回归测试框架&#xff08;regression testing framework&#xff09;&#xff0c;主要供 Java 开发人员编写单元测试。Junit在极限编程和重构中被极力推荐使用&#xff0c;因为它可以大大地提高开发的效率。 Junit的特性&…

Spring——全局异常处理(介绍@RestControllerAdvice和@ExceptionHandler)

目录 1.RestControllerAdviceExceptionHandler的作用2.实现原理3.各种特性 1.RestControllerAdviceExceptionHandler的作用 RestControllerAdvice注解 RestControllerAdvice是Spring框架提供的注解&#xff0c;用于全局异常处理。它将异常处理方法集中在一个类中&#xff0c;…

力扣66. 加一

文章目录 力扣66. 加一示例代码实现总结收获 力扣66. 加一 示例 代码实现 class Solution {public int[] plusOne(int[] digits) {int ndigits.length;for(int in-1;i>0;i--){if(digits[i]!9){digits[i];for(int ji1;j<n;j){digits[j]0;}return digits;}}int[] resnew i…

selenium环境安装

一、下载安装python 下载python安装python设置python环境变量安装selenium &#xff08;1&#xff09;下载python 您可以从Python官方网站&#xff08;https://www.python.org/downloads/&#xff09;下载Python。在页面上&#xff0c;您将看到不同版本的Python供您选择。根…

Qt中对Udp数据打包发送和接收(续)

这次用一个更加复杂的数据包举例。 心跳报文结构如下&#xff1a; struct HeartbeatPacket {quint16 protocolId;quint16 version;quint16 totalLength;quint16 reserve;QByteArray senderAddress;QByteArray receiverAddress;quint8 sequenceNumber;quint8 acknowledgementN…

MVCC-

文章目录 1. 什么是MVCC2. 快照读和当前读3. 复习4. MVCC实现原理之ReadView5. 总结 文章目录 1. 什么是MVCC2. 快照读和当前读3. 复习4. MVCC实现原理之ReadView5. 总结 1. 什么是MVCC 口述&#xff1a;MVCC其实他是解决这种读-写的情况的&#xff0c;当然读-写也可以用 锁来…