使用ElementUI组件库

引入ElementUI组件库

         1.安装插件

npm i element-ui -S

        2.引入组件库

import ElementUI from 'element-ui';

        3.引入全部样式

import 'element-ui/lib/theme-chalk/index.css';

        4.使用

Vue.use(ElementUI);

        5.在官网寻找所需样式

饿了么组件官网    我这里以button为例

        6.在组件中使用

    <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">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row>

按需引入

        1.安装插件

npm install babel-plugin-component -D

        2.引入

import { Button,Row } from 'element-ui';

        3.使用并命名

Vue.component(Button.name, Button)
Vue.component('rrr', Row)

        4.修改babel.config.js

module.exports = {presets: ['@vue/cli-plugin-babel/preset',["@babel/preset-env", { "modules": false }],],plugins: [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

        5.如果我们在命名时自定义了名字那么使用的时候就需要使用我们自定义的名字

    <rrr><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">警告按钮</el-button><el-button type="danger">危险按钮</el-button></rrr>

         6.如果启动时说却什么就通过npm i 进行安装

npm i

        

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

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

相关文章

Redis中设置验证码

限制一分钟内最多发送5次&#xff0c;且每次有效时间是5分钟&#xff01; String 发送验证码(phoneNumber) {key "shortMsg:limit:" phoneNumber;// 设置过期时间为 1 分钟&#xff08;60 秒&#xff09;// 使⽤ NX&#xff0c;只在不存在 key 时才能设置成功bool…

【QT】常用控件|widget|QPushButton|RadioButton|核心属性

目录 ​编辑 概念 信号与槽机制 控件的多样性和定制性 核心属性 enabled geometry ​编辑 windowTiltle windowIcon toolTip styleSheet PushButton RadioButton 概念 QT 控件是构成图形用户界面&#xff08;GUI&#xff09;的基础组件&#xff0c;它们是实现与…

tensorflow和numpy的版本

查看cuda版本 dpkg -l | grep cuda i libcudart11.0:amd64 11.5.117~11.5.1-1ubuntu1 amd64 NVIDIA CUDA Runtime Library ii nvidia-cuda-dev:amd64 11.5.1-1ubuntu1 …

搜维尔科技:数据手套为什么要选择SenseGlove

了解 SenseGlove SenseGlove 是一支由电子工程师、触觉研究人员和计算机视觉专家、XR 开发人员、UX 设计师和产品创新者组成的科幻爱好者团队&#xff0c;他们拥有丰富人类能力和赋予 Metaverse 意义的技能和热情。 推进触觉技术是我们实现这一目标的方式。 公司及产品背景 S…

【C++知识点总结全系列 (02)】:C++中的语句、运算符和表达式详细总结

文章目录 1、语句(1)简单语句A.空语句B.复合语句 (2)条件语句(3)迭代语句A.常规for循环B.范围for循环C.while和do...while (4)跳转语句A.break语句B.continue语句C.goto语句 (5)异常处理语句A.标准异常B.throw抛出异常 (6)try语句 2、运算符(1)算术运算符(2)关系运算符(3)逻辑运…

Cybervadis认证是什么?

Cybervadis认证是一种全面且深入的网络安全评估和认证服务&#xff0c;旨在帮助组织提高其网络安全实践的成熟度&#xff0c;并有效应对不断变化的网络威胁和攻击。以下是关于Cybervadis认证的一些关键信息&#xff1a; 认证目的&#xff1a; 评估和验证组织在网络安全方面的能…

Andrej Karpathy提出未来计算机2.0构想: 完全由神经网络驱动!网友炸锅了

昨天凌晨&#xff0c;知名人工智能专家、OpenAI的联合创始人Andrej Karpathy提出了一个革命性的未来计算机的构想&#xff1a;完全由神经网络驱动的计算机&#xff0c;不再依赖传统的软件代码。 嗯&#xff0c;这是什么意思&#xff1f;全部原生LLM硬件设备的意思吗&#xff1f…

HarmonyOS开发实战:UDP通讯示例规范

1. UDP简介 UDP协议是传输层协议的一种&#xff0c;它不需要建立连接&#xff0c;是不可靠、无序的&#xff0c;相对于TCP协议报文更简单&#xff0c;在特定场景下有更高的数据传输效率&#xff0c;在现代的网络通讯中有广泛的应用&#xff0c;以最新的HTTP/3为例&#xff0c;…

ESP32-Web-Server编程-建立多个 web server

ESP32-Web-Server编程-建立多个 web server 概述 当一个 web server 处理的请求过多、或者有长时间占用此 web server 的使用场景时,一个 web server 就不够用了。 这种情况下,我们可以在一个设备上建立两个或多个 web server 来满足更复杂的需求。 单个设备上建立多个 w…

Redis如何实现主从复制

Redis主从复制包括全量复制和增量复制。主是主服务器&#xff0c;从是从服务器&#xff0c;主服务器(master &#xff09;的数据如果更新了也会同步到从服务器(slave)&#xff0c;一个主服务器可以搭配很多个从服务器&#xff0c;主服务器负责写入&#xff0c;从服务器只能读取…

vmware虚拟机安装openEuler

一、openEuler简介 openEuler是一款开源操作系统。当前openEuler内核源于Linux&#xff0c;支持鲲鹏及其它多种处理器&#xff0c;能够充分释放计算芯片的潜能&#xff0c;是由全球开源贡献者构建的高效、稳定、安全的开源操作系统&#xff0c;适用于数据库、大数据、云计算、…

EEPROM内部原理

A2, A1, A0是EEPROM的地址引脚&#xff0c;用于设置设备地址。它们的作用如下&#xff1a; 设备寻址&#xff1a; 这三个引脚允许在I2C总线上唯一地标识EEPROM芯片。通过不同的连接方式&#xff08;接高、接低或悬空&#xff09;&#xff0c;可以为同一类型的EEPROM芯片设置不同…

1uH电感SK6615电流1.5A频率2MHz输入5.5V同步降压转换器

SK6615C 1.5A 2MHz 5.5V同步降压转换器 SK6615 SOT23-5封装和丝印LA 描述 该SK6615C是一款高效、DC-DC降压型开关稳压器&#xff0c;能够提供高达1.5A的输出电流。该器件的工作输入电压范围为 2.6V 至 5.5V&#xff0c;输出电压范围为 0.6V 至 VIN。工作频率为2MHz&#xff0c…

02.C1W1.Sentiment Analysis with Logistic Regression

目录 Supervised ML and Sentiment AnalysisSupervised ML (training)Sentiment analysis Vocabulary and Feature ExtractionVocabularyFeature extractionSparse representations and some of their issues Negative and Positive FrequenciesFeature extraction with freque…

玩具租赁系统(安装+讲解+源码)

技术栈: 后端: SpringBoot Mysql MybatisPlus 前端: Vue Element 分为 管理员端 用户端 功能: 用户端 管理员端 观看地址: B站搜&#xff1a; 【毕设者】玩具租赁系统(安装讲解源码)

Java高级重点知识点-13-数据结构、List集合、List集合的子类

文章目录 数据结构List集合List的子类&#xff08;ArrayList集、LinkedList集&#xff09; 数据结构 栈 stack,又称堆栈&#xff0c;它是运算受限的线性表&#xff0c;其限制是仅允许在标的一端进行插入和删除操作&#xff0c;不允许在其他任何位置进行添加、查找、删除等操作…

cesium 添加 Echarts图层(人口迁徒图)

cesium 添加 Echarts 人口迁徒图(下面附有源码) 1、实现思路 1、在scene上面新增一个canvas画布 2、通坐标转换,将经纬度坐标转为屏幕坐标来实现 3、将ecarts 中每个series数组中元素都加 coordinateSystem: ‘cesiumEcharts’ 2、示例代码 <!DOCTYPE html> <ht…

PCIe Switch

如图所示&#xff0c;pcie Switch 被定义为多个虚拟PCI-to-PCI Bridge设备的逻辑集合。所有交换机由以下基本规则管理。 . Switch在配置软件中表现为两个或多个逻辑PCI-to-PCI桥 不需要支持下行端口作为锁定请求的发起端口. 每个enable的端口必须符合“流量控制”规范。 .S…

【字符串处理】【双指针】个人练习-Leetcode-777. Swap Adjacent in LR String

题目链接&#xff1a;https://leetcode.cn/problems/swap-adjacent-in-lr-string/description/ 题目大意&#xff1a;给两个字符串start, end&#xff0c;只包含XLR三种字符。可以进行一次操作将XL转换成LX或者将RX转换为XR&#xff0c;返回是否存在方法使得start能转换成end …

Linux之进程控制(上)

目录 进程创建 进程终止 进程退出码 进程终止的方式 进程等待 进程等待的方式 status概述 总结 上期我们学习了Linux中进程地址空间的概念&#xff0c;至此进程的所有基本概念已经全部学习完成&#xff0c;今天我们将开始学习进程相关的操作。 进程创建 进程创建其实…