【JavaWeb】Day18.Vue组件库Element

什么是Element

  • Element:是饿了么团队研发的,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
  • 组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等等。
  • 官网:Element - The world's most popular Vue UI framework

Element快速入门

安装ElementUI组件库 (在当前工程的目录下),在命令行执行指令:

npm install element-ui@2.15.3

首先Ctrl+c终止任务,点击在集成终端中打开。

引入ElementUI组件库 

在main.js中引入ElementUI组件库 

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

Vue.use(ElementUI);

访问官网,复制组件代码,调整 

首先新创建一个.Vue项目,创建vue框架。Vue的组件文件每个组件由三个部分组成:<template> 、<script>、<style> 。

在打开官网复制代码,以button按钮为例。

因为默认情况下展示为根组件内容,所以要在app.vue中添加引用

注意如是2.X要下载vetur扩展 ,3.X下载valor扩展,自动导入组件。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

每日汇评:复活节假期前,欧元保持在关键技术位之间

周四欧洲早盘&#xff0c;欧元兑美元小幅下跌至1.0800&#xff1b; 谨慎的市场情绪帮助美元在数据发布前守住了阵地&#xff1b; 美联储理事沃勒表示&#xff0c;他们并不急于降低政策利率&#xff1b; 周四欧洲早盘&#xff0c;欧元兑美元受到温和的看跌压力&#xff0c;并跌向…

Python算法100例-4.6 歌星大奖赛

完整源代码项目地址&#xff0c;关注博主私信源代码后可获取 1.问题描述2.问题分析3.算法设计4.确定程序框架5.完整的程序6.问题拓展7.知识点补充 1&#xff0e;问题描述 在歌星大奖赛中&#xff0c;有10个评委为参赛的选手打分&#xff0c;分数为1&#xff5e;100分。选手最…

【Vue3之computed属性(四)】

文章目录 前言一、computed属性有缓存二、使用方法三、修改全名 前言 理解computed属性&#xff0c;实现输入姓和名得出全名并双向绑定&#xff0c;区分单向绑定和双向绑定。测试computed属性和方法的区别 一、computed属性有缓存 先引入computed&#xff0c;写箭头函数定义并…

Windows安装Odoo结合内网穿透实现公网访问本地企业管理系统

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…

springboot实战---5.最简单最高效的后台管理系统开发

&#x1f388;个人主页&#xff1a;靓仔很忙i &#x1f4bb;B 站主页&#xff1a;&#x1f449;B站&#x1f448; &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;SpringBoot &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&…

网络编程之流式套接字

流式套接字&#xff08;SOCK_STREAM&#xff09;是一种网络编程接口&#xff0c;它提供了一种面向连接的、可靠的、无差错和无重复的数据传输服务。这种服务保证了数据按照发送的顺序被接收&#xff0c;使得数据传输具有高度的稳定性和正确性。通常用于那些对数据的顺序和完整性…

Backend - gitea 首次建库(远端本地)

目录 一、建立远端储存库 1. 进入新增画面 2. 填写储存库名称&#xff08;如book&#xff09;&#xff0c;点击“建立”即可 二、本地关联远端储存库 1. 本地初始化储存库代码 &#xff08;1&#xff09;新建文件夹 &#xff08;2&#xff09;获取远端储存库 2. 本地编写…

Linux:基础IO

回顾C文件接口 stdin & stdout & stderr C 默认会打开三个输入输出流&#xff0c;分别是 stdin, stdout, stderr 仔细观察发现&#xff0c;这三个流的类型都是 FILE*, fopen 返回值类型&#xff0c;文件指针 系统文件I/O 接口介绍 open man open #include <sy…

FCP270 P0917YZ 兼容性如何

FCP270 P0917YZ 是一种现场控制处理器&#xff0c;通常应用于工业自动化和过程控制系统中。 这款现场控制处理器的主要职责是监测和控制多种过程变量&#xff0c;确保系统的正常运行&#xff0c;并且满足生产的要求。以下是关于FCP270 P0917YZ的一些可能用途和特点&#xff1a…

【Java 多线程】从源码出发,剖析Threadlocal的数据结构

文章目录 exampleset(T value)createMap(t, value);set(ThreadLocal<?> key, Object value)ThreadLocalMap和Thread的关系 全貌 ThreadLocal是个很重要的多线程类&#xff0c;里面数据结构的设计很有意思&#xff0c;很巧妙。但是我们平时使用它的时候常常容易对它的使用…

SwiftUI Release 引入的辅助焦点管理

文章目录 前言使用 FocusState 属性包装器高级技巧&#xff1a;专用辅助技术可聚焦字段的高级用法优化体验运行截图总结 前言 SwiftUI Release 引入了强大的新功能&#xff0c;其中之一是辅助焦点管理。 这个新功能使得在SwiftUI中处理辅助技术&#xff08;如 VoiceOver 和 S…

Python程序设计 循环结构(二)

1.斐波那契数列 编写一个能计算斐波那契数列中第x个数的小程序。斐波那契数列&#xff08;Fibonacci sequence&#xff09;&#xff0c;又称黄金分割数列、 因数学家莱昂纳多斐波那契&#xff08;Leonardoda Fibonacci&#xff09;以兔子繁殖为例子而引入&#xff0c;故又称为…

protobuf 从版本 4.24.4 降级到版本 3.19.0

1.查看protobuf版本号&#xff1a; pip show protobuf2.卸载 4.24.4 的版本 pip uninstall protobuf3.安装 3.19.0 的版本 pip install protobuf3.19.04.查看版本是否安装成功 pip show protobuf

STM32通用输入输出

一、GPIO介绍 功能&#xff1a; 输入&#xff08;Input&#xff09;&#xff1a; 浮空:输入没有接上拉和下拉 模拟&#xff1a;输入没有走上拉和下拉走的是模拟输入 上拉&#xff1a;上拉电阻是合上的&#xff0c;接入点为上拉电阻 下拉&#xff1a;下拉电阻是合上的 输…

Cocos2dx-lua ScrollView[三]高级篇

一.概述 本文缩写说明:sv = ScrollView, cell代表ScrollView的一个子节点 本文介绍sv的一种封装类库,来实现快速创建sv,有如下几个优点: 1.item的位置通过参数控制,提高开发效率 2.免去了调用sv的API,提高开发效率 3.分帧创建,提高性能 4.可通过参数控制,复用ite…

uniapp h5 引入阿里云一键登录

参考官方文档: 如何将H5页面接入网页端SDK并一键登录_号码认证服务(PNVS)-阿里云帮助中心 本文主要分享uniapp 对SDK依赖文件的引入 采用npm包引入的方法: 1.下载 // 下载npm资源并添加依赖到package.json npm i aliyun_numberauthsdk_web -S tips: 查看package.json文件,确…

Java毕业设计-基于springboot开发的疫情防控期间外出务工人员信息管理系统-毕业论文+答辩PPT(附源代码+演示视频)

文章目录 前言一、毕设成果演示&#xff08;源代码在文末&#xff09;二、毕设摘要展示1、开发说明2、需求分析3、系统功能结构 三、系统实现展示1、系统功能模块2、后台登录2.1管理员功能2.2用户功能2.3采集员功能2.4分析员功能 四、毕设内容和源代码获取总结 Java毕业设计-基…

MySql实战--事务到底是隔离的还是不隔离的

第3篇文章和你讲事务隔离级别的时候提到过&#xff0c;如果是可重复读隔离级别&#xff0c;事务T启动的时候会创建一个视图read-view&#xff0c;之后事务T执行期间&#xff0c;即使有其他事务修改了数据&#xff0c;事务T看到的仍然跟在启动时看到的一样。也就是说&#xff0c…

MySQL安装和配置(超详细)

&#x1f468;‍&#x1f4bb;作者简介&#xff1a;&#x1f468;&#x1f3fb;‍&#x1f393;告别&#xff0c;今天 &#x1f4d4;高质量专栏 &#xff1a;☕java趣味之旅 欢迎&#x1f64f;点赞&#x1f5e3;️评论&#x1f4e5;收藏&#x1f493;关注 &#x1f496;衷心的希…

为什么做秒真问答?秒真问答营销的价值分析

近来&#xff0c;今日头条对部分业务做出调整。一方面是将“头条百科”升级为“抖音百科”&#xff0c;通过“抖音百科”这个新品牌&#xff0c;更好的为今日头条和抖音的内容场景服务。另外一方面则是&#xff0c;推出全新的问答业务“秒真问答”&#xff0c;目前已经在抖音和…