Vue 引入 Element-UI 组件库

Element-UI 官网地址:https://element.eleme.cn/#/zh-CN 

完整引入:会将全部组件打包到项目中,导致项目过大,首次加载时间过长。

 下载 Element-UI

一、打开项目,安装 Element-UI 组件库。

 使用命令:

npm i element-ui -S

 完整引入:

一、在 main.js 文件中,引入组件库和组件样式。

import Vue from 'vue'
import App from './App.vue'
import router from './router'// 1.引入 Element-UI 组件库
import ElementUI from 'element-ui';
// 2.引入 Element-UI 组件样式
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false// 3.使用 Element-UI 组件库
Vue.use(ElementUI);new Vue({router,render: h => h(App)
}).$mount('#app')

二、在官网中找到需要的组件,复制对应的代码。

三、创建 Home.vue 页面,将代码粘贴到页面中。

<template><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>
</template><script>
export default {name: "Home",
}
</script>

四、最终效果

 原创作者:吴小糖

 创作时间:2023.8.14

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

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

相关文章

ArcGIS Maps SDK for JavaScript系列之二:认识Map和MapView

目录 Map创建一个 Map 对象的示例代码&#xff1a;Map的常用属性Map的常用方法 MapViewMapView的常用属性MapView的常用方法 在 ArcGIS Maps SDK for JavaScript 中&#xff0c;Map 和 MapView 是两个重要的概念&#xff0c;用于创建和展示地图应用程序。 Map Map 表示一个地图…

【Rust】Rust学习 第十三章Rust 中的函数式语言功能:迭代器与闭包

Rust 的设计灵感来源于很多现存的语言和技术。其中一个显著的影响就是 函数式编程&#xff08;functional programming&#xff09;。函数式编程风格通常包含将函数作为参数值或其他函数的返回值、将函数赋值给变量以供之后执行等等。 更具体的&#xff0c;我们将要涉及&#…

bert,transformer架构图及面试题

Transformer详解 - mathor atten之后经过一个全连接层残差层归一化 class BertSelfOutput(nn.Module):def __init__(self, config):super().__init__()self.dense nn.Linear(config.hidden_size, config.hidden_size)self.LayerNorm nn.LayerNorm(config.hidden_size, epscon…

redis 发布和订阅

目录 一、简介 二、常用命令 三、示例 一、简介 Redis 发布订阅 (pub/sub) 是一种消息通信模式&#xff1a;发送者 (pub) 发送消息&#xff0c;订阅者 (sub) 接收消息。Redis 客户端可以订阅任意数量的频道。下图展示了频道 channel1 &#xff0c;以及订阅这个频道的三个客户…

前端对文件转换处理的一些常用方法

文章目录 0&#xff0c;前言1&#xff0c;将图片的url网络链接(http://) 转为base64格式2&#xff0c;将base64的图片数据转换为file文件3&#xff0c;将以base64的图片数据转换为Blob4&#xff0c;将file文件转化为base645&#xff0c;将file文件转换为Blob6&#xff0c;获取文…

利用Opencv实现人像迁移

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 今天来学习一下如何使用Opencv实现人像迁移&#xff0c;欢迎大家一起参与探讨交流~ 本文目录&#xff1a; 一、实验要求二、实验环境三、实验原理及操作1.照片准备2.图像增强3.实现美颜功能4.背景虚化5.图像二值化处理6.人…

item_password-获得淘口令真实url

一、接口参数说明&#xff1a; item_password-获得淘口令真实url &#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_password 名称类型必须描述keyString是调用key&#xff08…

tomcat源码修改与编译

1、获取源码 从github下载其源码&#xff1a;https://github.com/apache/tomcat 2、选择版本 切换到对应版本&#xff08;直接用相对应的Git tag即可&#xff09;&#xff1a; git checkout 9.0.793、修改源代码&#xff0c;并且生成补丁 这里我们以修改去掉新版本的ws的检…

129.【Spring 注解 IOC】

Spring 注解 (一)、组件注册1. Configuration 与 Bean 容器注册组件(1).无注解注入方式(2).注解注入方式 2. ComponentScan 自动扫描组件和自动扫描规则(1).无注解扫描方式(2).注解扫描注入方式(3).指定扫描或不扫描的包 (过滤) 3. 自定义TypeFilter指定过滤规则 Filter(1).自定…

QT多屏显示程序

多屏显示的原理其实很好理解&#xff0c;就拿横向扩展来说&#xff1a; 计算机把桌面的 宽度扩展成了 w1&#xff08;屏幕1的宽度&#xff09; w2(屏幕2的宽度) 。 当一个窗口的起始横坐标 > w1&#xff0c;则 他就被显示在第二个屏幕上了。 drm设备可以多用户同时打开&am…

Spring MVC 简介

目录 1. 什么是MVC2. 什么是SpringMVC 1. 什么是MVC MVC是一种常用的软件架构模式。可以看作是一种设计模式&#xff0c;也可以看作是一种软件框架。经典MVC模式中&#xff0c;M是指模型&#xff0c;V是视图&#xff0c;C则是控制器&#xff0c;使用MVC的目的是将M和V的实现代…

golang中使用chan控制协程并发简单事例

func main() {processNum : 5ch : make(chan struct{}, processNum)for true {ch <- struct{}{}go func() {defer func() {<-ch}()fmt.Println("我是协程", time.Now().UnixNano())time.Sleep(time.Second * 5)}()} } 可以看到&#xff0c;这里每5s会执行一次带…

Linux15 消息队列 线程

目录 1、进程间通信IPC&#xff1a; 2、多线程 3、向消息队列中写入数据 4、从消息队列中读取数据 5、多线程&#xff1a; 6、将多线程的数据返回给主…

数据库索引优化策略与性能提升实践

文章目录 什么是数据库索引&#xff1f;为什么需要数据库索引优化&#xff1f;数据库索引优化策略实践案例&#xff1a;索引优化带来的性能提升索引优化规则1. 前导模糊查询不适用索引2. 使用IN优于UNION和OR3. 负向条件查询不适用索引4. 联合索引最左前缀原则5. 范围条件查询右…

【Mysql】MVCC版本机制的多并发

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…

PostgreSQL空值的判断

PostgreSQL空值的判断 空值判断非空判断总结 空值判断 -- 查询为空的 is null,sql简写isnull select * from employees where manager_id isnull;select * from employees where manager_id is null;非空判断 -- 查询不为空的 is not null;sql简写notnull select * from empl…

Java【数据结构】二分查找

&#x1f31e; 题目&#xff1a; &#x1f30f;在有序数组A中&#xff0c;查找目标值target &#x1f30f;如果找到返回索引 &#x1f30f;如果找不到返回-1 算法描述解释前提给定一个内含n个元素的有序数组A&#xff0c;满足A0<A1<A2<<An-1,一个待查值target1设…

mysql 8.0安装

操作系统&#xff1a;22.04.1-Ubuntu apt 安装命令 sudo apt install mysql-client-core-8.0 sudo apt install mysql-server-8.0终端输入 mysql 可以直接免密登录 如果此时提示需要密码&#xff0c;则可以进入配置文件&#xff0c;设置免密登录 sudo vim /etc/mysql/mysq…

【探索Linux】—— 强大的命令行工具 P.5(yum工具、git 命令行提交代码)

阅读导航 前言一、软件包管理器 yum1.yum的概念yum的基本指令使用例子 二、git 命令行提交代码总结温馨提示 前言 前面我们讲了C语言的基础知识&#xff0c;也了解了一些数据结构&#xff0c;并且讲了有关C的一些知识&#xff0c;也学习了一些Linux的基本操作&#xff0c;也了…

20W IP网络吸顶喇叭 POE供电吸顶喇叭

SV-29852T 20W IP网络吸顶喇叭产品简介 产品用途&#xff1a; ◆室内豪华型吸顶喇叭一体化网络音频解码扬声器&#xff0c;用于广播分区音频解码、声音还原作用 ◆应用场地如火车站、地铁、教堂、工厂、仓库、公园停车场等&#xff1b;室内使用效果均佳。 产品特点&#xff…