elementUI相关知识及搭建使用过程

news2024/9/20 20:28:36

​​​​​​

目录

​​​​​​

一.elementUI相关的知识

1.什么是elementUI

2.如何在创建的项目中使用elementUI的组件(1)安装

​ (2)在项目的main.js中引入elementUI

(3)使用elementui里的组件


一.elementUI相关的知识

1.什么是elementUI

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
件库.   官网地址
如图有各种丰富的组件提供给我们使用,使得我们写前端代码时不必每个组件都有我们写,可以在elementUI中拿到我们要写的相关的组件代码改成我们想要的效果即可。

2.如何在创建的项目中使用elementUI的组件

(1)安装

将如下代码在创建的项目终端中

npm install element-ui -save

如图执行此代码后出现如下图进度条即可:

 (2)在项目的main.js中引入elementUI

在 main.js 中写入以下内容:
import ElementUI from 'element-ui' ;
import 'element-ui/lib/theme-chalk/index.css' ;
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');
如下图所示:

 

(3)使用elementui里的组件

如图在组件中找到想要的然后点击显示代码即可找到

如图将此组件的代码直接拿到自己创建的vue文件中,要使用的留下不用的删除或者修改

结果如图所示:

注意:后面每创建一个项目都要如上述流程执行一遍。

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

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

相关文章

【管理咨询宝藏136】RB大型卡车集团供应链体系优化设计方案

本报告首发于公号“管理咨询宝藏”,如需阅读完整版报告内容,请查阅公号“管理咨询宝藏”。 【管理咨询宝藏136】RB大型卡车集团供应链体系优化设计方案 【格式】PDF版本 【关键词】罗兰贝格、供应链管理、运营提升 【核心观点】 - 针对前两个模块&…

Charles配置与API数据抓取

2024软件测试面试刷题,这个小程序(永久刷题),靠它快速找到工作了!(刷题APP的天花板)-CSDN博客跳槽涨薪的朋友们有福了,今天给大家推荐一个软件测试面试的刷题小程序。https://blog.c…

基于STM32的智能健康监测手表

目录 引言环境准备智能健康监测手表系统基础代码实现:实现智能健康监测手表系统 4.1 数据采集模块4.2 数据处理与分析4.3 通信模块实现4.4 用户界面与数据可视化应用场景:健康监测与管理问题解决方案与优化收尾与总结 1. 引言 智能健康监测手表通过使…

美团SaaS技术部测开,复捞我开摆

美团SaaS技术部测开,复捞我开摆 4.3 80min 项目实习你主要承担的部分你做的项目技术实现是什么样的,前后端是怎么做出来的自动登录功能的架构软件测试全流程你有了解吗搭建测试环境是否可有可无哪些举措是你牵头做的发现了什么问题在代码核验阶段你如何…

C++STL梳理

CSTL标准手册: https://cplusplus.com/reference/stl/ https://cplusplus.com/reference/vector/vector/at/ 1、STL基础 1.1、STL基本组成(6大组件13个头文件) 通常认为,STL 是由容器、算法、迭代器、函数对象、适配器、内存分配器这 6 部分构成&…

【消息队列】Kafka学习笔记

概述 定义 传统定义: 一个分布式的, 基于发布订阅模式的消息队列, 主要应用于大数据实时处理领域新定义: 开源的分布式事件流平台, 被用于数据管道/流分析/数据集成 消息队列的使用场景 传统消息队列的主要应用场景包括: 削峰: 解耦: 异步: 两种模式 点对点模式 发布/订…

Java基础:IO流

目录 一、定义 1.引言 2.分类 (1)按照流的方向分 (2)按操作文件的类型分 3.体系结构 二、字节流(以操作本地文件为例) 1. FileOutputStream 类 (1)定义 (2&am…

【Linux】Linux编译器(gcc,g++)与动静态链接库

对于一个 C 程序,从源文件到形成可执行程序一共要进行四步:预处理、编译、汇编、链接 。 接下来,我们用 gcc 分别演示这四个过程。 一、预处理(进行宏替换) 预处理中,需要完成头文件的展开、宏替换、去注释、条件编译等工作。 …

说一说三大运营商的流量类型,看完就知道该怎么选运营商了!

说一说三大运营商的流量类型,看完就知道该怎么选运营商了?目前三大运营商的流量类型大致分为通用流量和定向流量,比如: 中国电信:通用流量定向流量 电信推出的套餐通常由通用流量定向流量所组成,通用流量…

《数字图像处理》实验报告一

一、实验任务与要求 1、用 matlab 编写空间域点处理操作处理给定的几幅图像,要求: 使用 imread 读取当前工作目录下的图像设计点处理操作并用代码实现处理用 imnshow 显示处理后的图像用 imwrite 保存处理后的图像 2、提交内容:m文件 实验…

假冒国企现形记:股权变更视角下的甄别分析

启信慧眼-启信宝企业版 假冒国企公告2024-06-07,中粮集团有限公司官网发布《关于冒名中粮企业名单公告》。公告显示,”有不法分子通过伪造相关材料等方式,以我集团子公司名义开展业务,进行虚假宣传。经核实,上述公司假…

【SpringCloud】API网关(Spring Cloud Gateway)

本文基于上一篇http://t.csdnimg.cn/q3YrK 使用抽取的方案使用feign的基础上使用Spring Cloud Gateway。 API网关 API网关(简称网关)也是一个服务,通常是后端服务的唯一入口。它就像是整个微服务架构的门面,所有的外部客户端访问…

Python学习笔记13:进阶篇(二),类的继承与组合

类的继承 我们在编写一系列的类的时候,会发现这些类很相似,但是又有各自的特点和行为。在编写这些类的时候,我们可以把相同的部分抽象成一个基类,然后根据其他不同的特点和行为,抽象出子类,继承这个基类。…

python实训day4

1、查看数据库的版本 2、查看当前用户 3、查看当前数据库 4、计算表达式的结果; 任何一个数据库,无论大小,都首先是一个超级计算器 5、查看当前MySQL环境中所有的数据库; 系统数据库(只能看)和自定义数据库(任何操作) 6、先建数据库 gaoming 7、如果表已经存在,则创建不能成功 …

刷题之小欧的平均数(卡码网)

小欧的平均数 这道题不看解析的话完全没有思路&#xff0c;连题目都没读明白&#xff0c;甚至看了评论答出来了还是不知道为什么&#xff0c;有知道的朋友可以教教我 #include<iostream> using namespace std;int main() {int x,y,z;cin>>x>>y>>z;//…

oracle12c到19c adg搭建(六)切换后12c备库服务器安装19c软件在19c主库升级数据字典后尝试同步

一、安装19c软件 参考文章oracle12c到19c adg搭建&#xff08;三&#xff09;oracle19c数据库软件安装 二、原主库尝试通过19c软件启动数据库 2.1复制12c的相关参数文件和密码文件到19c目录 注意:密码文件需要从已切换主库19c传过来 [oracleo12u19p ~]$ cd /u01/app/oracle…

亲测有效!性能压测异常竟能自动化分析!

性能压测是一种评估系统运行效率和稳定性的方法&#xff0c;通过模拟真实的使用场景和负载条件&#xff0c;对系统进行压力测试和负载测试&#xff0c;并对测试结果进行分析&#xff0c;以评估系统的性能&#xff0c;其中性能压测结果分析是性能压测的重要环节。以往的性能压测…

ONLYOFFICE 桌面编辑器 8.1 发布:全新功能齐备的 PDF 编辑器、丰富的幻灯片版式

前言 在当前数字化迅速发展的时代&#xff0c;办公软件套件作为企业日常工作的核心工具&#xff0c;其功能的全面性和使用的便捷性直接影响着工作效率和团队协作的效果。在众多办公软件中&#xff0c;ONLYOFFICE凭借其卓越的性能和丰富的功能&#xff0c;备受用户青睐。近日&a…

深入了解 GPT-4 和 ChatGPT 的 API---OpenAI Playground

文章目录 基本概念OpenAI API 提供的可用模型在 OpenAI Playground 中使用 GPT 模型 掌握GPT-4 和 ChatGPT 的 API 的使用方法&#xff0c;以便有效地将它们集成到 Python 应用程序中。首先&#xff0c;需要了解 OpenAI Playground。这将使你在编写代码之前更好地了解模型。接着…

React尚硅谷115-126(setState、Hooks、Fragment、context、组件优化、renderprops

122&#xff0c;context 只能用value传&#xff0c;可以传对象&#xff0c;字符串 一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信 使用&#xff1a; 创建Context容器对象&#xff1a; const XxxContext React.createContext() 渲染子组时&#xff0c;外面包…