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

​​​​​​

目录

​​​​​​

一.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.mzph.cn/pingmian/34371.shtml

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

相关文章

MQTTX 1.10.0 发布:CLI高级文件管理与配置

MQTTX 1.10.0 版本现已发布! 在本次更新中,CLI 版本在文件管理和配置功能方面进行了显著增强。主要更新包括:支持从文件中读取和写入消息、高级配置选项、文本输出模式、以及改进的日志记录。此外,桌面版本现在支持数据库重建&am…

IDEA集成Maven

💻博主现有专栏: C51单片机(STC89C516),c语言,c,离散数学,算法设计与分析,数据结构,Python,Java基础,MySQL,linux&#xf…

《Nest系列 - 3. 掌握常见Nest 装饰器,奠定坚实基础!!!!!!》

nest 一个核心就是依赖注入,而中的大部分功能都是通过装饰器来实现的,那什么是装饰器呢? 就是一个 xxx ,诸如 Module,controller, Get, Post 那这样有什么好处呢? 可以把他理解成一个方法,在不改…

物联网 IoT 收录

物联网IoT日常知识收录 thingsboard, nodered是国际大品牌, iotgateway是国内的, 几个scada, pyscada, json-scada都还不错,比较一下。thingsboard-gateway是python系的,如果你愿意,可以用这个作为公司的物联网网关。…

深入探索Jetpack数据绑定(DataBinding)

Jetpack的数据绑定(DataBinding)库为我们提供了一个强大而灵活的工具,用于将UI组件与数据源绑定在一起。本文将深入探讨数据绑定的高级用法,包括双向绑定、自定义Binding Adapter、使用LiveData和ViewModel,以及如何处…

热虹吸管的传热计算

热对称管和热管通过使用中空管内的两相流体,在特定的距离上传输大量的热量。 更广泛使用的热管使用吸芯结构将液体输送回热端,而热虹吸管是一个简单的空心管,使用重力。 由于缺乏吸芯结构,使得热虹吸管比传统的热管便宜得多。 然…

跟《经济学人》学英文:2024年6月22日这期 Think Nvidia looks dear?

Think Nvidia looks dear? American shares could get pricier still Investors are willing to follow whichever narrative paints the rosiest picture 觉得Nvidia看起来很贵?美国股票可能会变得更贵 投资者愿意追随任何一个描绘出最乐观的故事 dear&#x…

虚幻引擎 Gerstner Waves -GPU Gems 从物理模型中实现有效的水体模拟

这篇文章重点在于结合GPU Gems一书中有关Gerstner Waves 的数学公式,在虚幻引擎中复现正确的Gerstner Waves和正确的法线 文中内容整理自书中,并附带我的理解,与在虚幻引擎中的实现,可以参考原文看这篇文章,原文网上很…

Redis队列自研组件

背景 年初的时候设计实践过一个课题:SpringBootRedis实现不重复消费的队列,并用它开发了一个年夜饭下单和制作的服务。不知道大家还有没有印象。完成这个课题后,我兴致勃勃的把它运用到了项目里面,可谁曾想,运行不久后…

靠AI一年增长15%,商场的春天来了么

文|艺 思 编|王一粟 “在商场全面部署AI机器人仅1年,AI带来的销售占同期整体联营销售额的比重逐步增加,最高达到了15%。” 这是正在银泰百货发生的真实案例。 除了线上电商,百货商场等线下的实体零售也正在尝试…

汇聚荣电商实力好不好?

在数字化浪潮的推动下,电商平台如雨后春笋般涌现,而“汇聚荣”作为其中的一员,其综合实力自然成为业界与消费者关注的焦点。那么,汇聚荣电商的实力究竟如何呢?接下来,我们将从多个维度深入探讨这一问题。 一、品牌影响…

创建和探索VGG16模型

PyTorch在torchvision库中提供了一组训练好的模型。这些模型大多数接受一个称为 pretrained 的参数,当这个参数为True 时,它会下载为ImageNet 分类问题调整好的权重。让我们看一下创建 VGG16模型的代码片段: from torchvision import models…

什么美业系统好用?美业门店收银系统源码分享、小程序展示

专业美业系统与普通系统相比,更加贴合美业门店的经营需求,提供了更全面、便捷、高效的管理功能,有助于提升门店的服务质量和经营效益。 博弈美业系统包括PC、iPad、手机、小程序四大端口,满足不同人群的各种需求。客户可从小程序…

有什么能和ai聊天的软件?5个软件教你快速和ai进行聊天

有什么能和ai聊天的软件?5个软件教你快速和ai进行聊天 当今数字化时代,人工智能(AI)技术已经逐渐渗透到我们的日常生活中,而与AI进行聊天也成为了一种趋势和乐趣。以下是五款可以和AI进行聊天的软件,它们提…

如何提高台式扫描电镜的放大倍数

台式扫描电镜(SEM)因其紧凑的设计和高效的成像能力,在材料科学、生物学和纳米技术等领域中扮演着重要角色。然而,用户在使用过程中可能会遇到需要更高放大倍数以获得更细微结构图像的情况。以下是一些提高台式扫描电镜放大倍数的策…

大厂面试官问我:Redis持久化RDB有没有可能阻塞?阻塞点在哪里?【后端八股文三:Redis持久化八股文合集】

往期内容: 大厂面试官问我:Redis处理点赞,如果瞬时涌入大量用户点赞(千万级),应当如何进行处理?【后端八股文一:Redis点赞八股文合集】-CSDN博客 大厂面试官问我:布隆过滤…

C++ 入门

前言 c的发展史: C的起源可以追溯到1979年,当时Bjarne Stroustrup在贝尔实验室开始开发一种名为“C with Classes”的语言。以下是C发展的几个关键阶段: 1979年:Bjarne Stroustrup在贝尔实验室开始开发“C with Classes”。1983…

鸿蒙NEXT,保障亿万中国老百姓数据安全的操作系统

吉祥学安全知识星球🔗除了包含技术干货:Java代码审计、web安全、应急响应等,还包含了安全中常见的售前护网案例、售前方案、ppt等,同时也有面向学生的网络安全面试、护网面试等。 上周华为发布了最新的鸿蒙NEXT操作系统&#xff0…

windows系统上nginx搭建文件共享

1、下载windows版nginx 下载地址 2、配置nginx 编辑nginx.conf配置文件 在http模块下添加这个参数 underscores_in_headers on;#修改location内容,共享哪个文件夹,就写哪个文件夹,最后一定要跟上/,否则无法访问 location / {…

Depth Anything环境搭建推理测试

引子 基于单目摄像头的深度估计,一直是CV领域的一个难点,之前也对此关注也不够多。偶然浏览技术博客,看到Depth Anything: Unleashing the Power of Large-Scale Unlabeled Data这个最新CVPR2024的工作。看到名字,大概也能猜出来…