vue3+vite+ts使用Element+Plus

news2024/11/27 23:53:57

1.安装Element+Plus

npm install element-plus --save

2.在index.html中加入

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

3.修改main.ts

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

4.参照文档,添加按钮。在App.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>

5.在App.vue的<script lang="ts">标签下添加

import {ElRow,ElButton} from "element-plus"

 

6.在export default中添加

components:{ElButton, ElRow},

7.保存运行,就可以看到按钮了。但是按钮显示不正确,这是index.css导致的。

8

 8.去掉index.css中的相关内容,现在显示正常了

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

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

相关文章

代码随想录算法训练营第四十八天 | LeetCode 121. 买卖股票的最佳时机、122. 买卖股票的最佳时机 II

代码随想录算法训练营第四十八天 | LeetCode 121. 买卖股票的最佳时机、122. 买卖股票的最佳时机 II 文章链接&#xff1a;买卖股票的最佳时机 买卖股票的最佳时机 II 视频链接&#xff1a;买卖股票的最佳时机 买卖股票的最佳时机 II 1. LeetCode 121. 买卖股票的最佳时机 1.1…

centos7下安装主从仲裁三台结构的MongoDB 7.0.4

安装手册英文版在这里 https://www.mongodb.com/docs/v7.0/tutorial/install-mongodb-on-red-hat/ 我的安装过程 1&#xff09;基础安装 1、创建 /etc/yum.repos.d/mongodb-org-7.0.repo文件 下面的代码复制到这个文件中&#xff0c;保存 [mongodb-org-7.0] nameMongoDB Re…

RBF、GMM、FUZZY

感觉这三种方法有联系&#xff0c;RBF用多个加权高斯拟合值函数&#xff0c;GMM用多个加权高斯拟合联合分布函数&#xff0c;GMM的加权相比于概率更像FUZZY里的隶属度&#xff0c;并且FUZZY的不同规则实现的就是一定程度的聚类。 一、RBF 资料&#xff1a;https://blog.csdn…

JAVA使用Grafana和Loki抓取聚合日志

Grafana和Loki抓取聚合日志 适用范围配置常见问题参考文章 适用范围 Grafana是日志看板Loki是Grafana的一个插件用于收集日志promtail是Loki配套的抓取工具&#xff0c;放在目标服务器抓取日志 配置 日志服务器安装Grafana&#xff0c;傻瓜式下一步日志服务器启动Loki&#…

CRM系统中的客户保留是什么意思?有多少客户可以留下来?

一家企业&#xff0c;在销售过程中有多少客户是有效的&#xff1f;又有多少客户可以留下来&#xff1f;如果企业只顾着开发新客户&#xff0c;而忽略了客户保留&#xff0c;那么将会造成资源的浪费。那么CRM系统中的客户保留是什么意思&#xff1f; 什么是客户保留&#xff1f…

单调栈【2023年最新】

做题的时候看到了单调栈&#xff0c;但是不知道是个什么玩意&#xff0c;记录一下吧。 单调栈含义 单调栈是一种特殊的数据结构&#xff0c;用于解决一些与单调性相关的问题。它的基本含义是在栈的基础上&#xff0c;维护一个单调递增或单调递减的栈。 在单调递增栈中&#…

caffe搭建squeezenet网络的整套工程

之前用pytorch构建了squeezenet&#xff0c;个人觉得pytorch是最好用的&#xff0c;但是有的工程就是需要caffe结构的&#xff0c;所以本篇也用caffe构建一个squeezenet网络。 数据处理 首先要对数据进行处理&#xff0c;跟pytorch不同&#xff0c;pytorch读取数据只需要给数据…

第六章《凸优化核心过程:真正搞懂梯度下降过程》

优化问题可以分为凸优化问题和非凸优化问题&#xff0c;凸优化问题是指定义在凸集中的凸函数最优化的问题&#xff0c;典型应用场景就是 目标函数极值问题的求解。凸优化问题的局部最优解就是全局最优解&#xff0c;因此 机器学习中很多非凸优化问题都需要被转化为等价凸优化问…

【链接装载与库】动态链接(下)

动态链接 》上篇《 延迟绑定 (PLT) 动态链接的确有很多优势&#xff0c;比静态链接要灵活得多&#xff0c;但它是以牺牲一部分性能为代价的。主要原因是动态链接下对于全局和静态的数据访问都要进行复杂的GOT定位&#xff0c;然后间接寻址&#xff1b;对于模块间的调用也要先…

Go RabbitMQ简介 使用

RabbitMQ简介 RabbitMQ 是一个广泛使用的开源消息队列系统&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;标准&#xff0c;为分布式应用程序提供了强大的消息传递功能。RabbitMQ 是 Erlang 语言编写的&#xff0c;具有高度的可扩展性和可靠性&#xff0c;…

普洱茶上市?澜沧古茶通过港股聆讯

近日&#xff0c;澜沧古茶成功通过港交所聆讯&#xff0c;随后在11月7日披露了相关资料集。该公司即将在港交所主板上市&#xff0c;此次上市由中信建投国际和招商证券国际担任联席保荐人。据了解&#xff0c;澜沧古茶或将成为内地茶企第一股&#xff0c;也将成为“普洱茶第一股…

el-form-item的label的长度单独改掉,用vue3样式穿透的写法,加上css选择器查找特定的id拿到元素

为了让这个会员卡号这几个字和下面的表格对齐&#xff0c;需要改el-form-item的label的长度 如果直接改el-form的label-width,那么所有的el-form-item的label都会改&#xff0c;我不希望这样 我希望只改第1个会员卡号的label长度 给这个el-form-item添加一个id :deep(.el-for…

漏洞复现--泛微E-Office信息泄露(CVE-2023-2766)

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

xshell隧道设置

现在有远程外网地址 120.120.120.120和另一台内网地址192.168.1.110两台cvm 但是192.168.1.110 无法直接通过外网地址访问, 需要通过120.120.120.120建立隧道来连接 需要访问192.168.1.110 机器的3306端口, 可以这么做 将192.168.1.110 的3306映射到本地13306端口 1.连接外网…

YOLOv8-Seg改进:多尺度空洞注意力(MSDA),增强局部、稀疏提取特征能力

🚀🚀🚀本文改进: 新的注意力机制——多尺度空洞注意力(MSDA)。MSDA 能够模拟小范围内的局部和稀疏的图像块交互; 如何在OLOv8-seg下使用:1)作为注意力机制放在各个网络位置;2)与C2f结合替代原始的C2f 🚀🚀🚀YOLOv8-seg创新专栏:http://t.csdnimg.cn/KLS…

人工智能辅助职业教育发展——开启教育新时代

人工智能辅助职业教育发展——开启教育新时代 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;逐渐渗透到各行各业&#xff0c;并在许多领域发挥着重要作用。如今&#xff0c;AI的应用已经延伸到职业教育领域&#xff0c;为培养高素质人才提供了新的可能和动…

用户交互引导大模型生成内容特征,LLM-Rec框架助力个性化推荐!

欢迎来到魔法宝库&#xff0c;传递AIGC的前沿知识&#xff0c;做有格调的分享❗ 喜欢的话记得点个关注吧&#xff01; 今天主要和大家分享一篇使用大语言模型做数据增强来提升推荐系统性能的研究 标题&#xff1a; LLM-Rec: Personalized Recommendation via Prompting Large …

2023软件测试必问的100个面试题【含答案】

一、测试理论 1.什么是软件测试&#xff1f; 答&#xff1a;软件测试是通过执行预定的步骤和使用指定的数据&#xff0c;以确定软件系统在特定条件下是否满足预期的行为。 2.测试驱动开发&#xff08;TDD&#xff09;是什么&#xff1f; 答&#xff1a;测试驱动开发是一种开…

基于情感分析+聚类分析+LDA主题分析对服装产品类的消费者评论分析(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

MKL.NET:为.NET开发者提供高性能数学计算支持的开源库

目录 01 项目简介02 主要功能03 项目结构04 项目地址 MKL是英特尔推出的一套功能强大、性能优化的数学库&#xff0c;主要是采用C/C编写的。今天给大家推荐一个MKL的.Net版本&#xff0c;让我们无需与C/C打交道&#xff0c;方便我们集成到应用开发中去。 01 项目简介 MKL.NET…