vue3 安装element-plus进行一些简单的测试

1、安装element-plus

官网地址:https://element-plus.org/zh-CN/guide/installation.html

2、安装方法:

# 选择一个你喜欢的包管理器

# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

这里我选择的 是pnpm来进行安装:

新建终端:

3、安装成功以后,package.json会多一个element-plus的依赖

4、main.ts中增加引用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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

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

5、预览效果:

显示了一个按钮的效果,当然这个只是测试中简单的集成,实际的开发中,配制要比这个复杂。

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

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

相关文章

STM32G474的HRTIM用作时基定时器

STM32G474的HRTIM由7个定时器组成,分别是主定时器,定时器A,定时器B,定时器C,定时器D,定时器E和定时器F,每个定时器均可单独配置,独立工作。每个定时器都有1个独立的计数器和4个独立的…

[基础入门]正向shell和反弹shell

前言 在渗透过程能获取shell是很重要的一点,首先可以使用一些漏洞对ssh和ftp进行攻击获取shell,如果没有这些漏洞可以考虑一下使用正向shell或者是反弹shell。 一、什么是正向shell和反弹shell 其实这个过程是相对的,需要找到一个参考点&a…

使用 Python 绘制词云图的详细教程

如何使用python绘制词云图 词云图(Word Cloud)是数据可视化中常用的一种技术,通过将文字以不同的大小、颜色和方向排列,以展示文本数据中词汇的频次和重要性。对于文本分析、情感分析、关键词提取等应用,词云图都能够…

【FreeRTOS】队列实验-多设备玩游戏(旋转编码器)

目录 0 前言1 任务1.1 本节源码1.2实验目的1.3实现方案 2 code2.1 创建队列2.2 写队列2.3 创建任务 3 勘误 0 前言 学习视频: 【FreeRTOS入门与工程实践 --由浅入深带你学习FreeRTOS(FreeRTOS教程 基于STM32,以实际项目为导向)】…

CronTab及定时任务

目录 CronTab及定时任务 一、定时任务的基本原理 二、Cron定时任务 但是 三、其他补充命令 CronTab及定时任务 一、定时任务的基本原理 # 每5秒钟向文本中输出一次时间#for i in {1..10}; do while [ 1 < 2 ]; dodate "%Y-%m-%d %H:%M:%S" >> /opt/lea…

Prism-学习笔记1-安装Prism

安装Prism 在VS2022中安装如下图&#xff1a; 2. 搜索Prism&#xff0c;安装Prism&#xff1a;&#xff08;ps&#xff1a;如果安装很慢&#xff0c;直接往上搜关键字 Prism template Pack 下载&#xff0c;或者这里我下载好的Prism包&#xff0c;提取码&#xff1a;bi7c&…

普通高校普通教师如何应对智能时代的冲击

前篇 艰难求生的转型之路-CSDN博客 背景 增量发展阶段&#xff0c;大部分人生活随着个人努力都会出现改善&#xff1b; 存量博弈阶段&#xff0c;大部分人&#xff0c;不展开&#xff0c;求生欲。 增量→“蛋糕”越来越大&#xff1b; 存量→“蛋糕”(*^_^*)凸(艹皿艹 ) …

将 hugo 博客搬迁到服务器

1. 说明 在 Ubuntu 22.04 上使用 root 账号&#xff0c;创建普通账号&#xff0c;并赋予 root 权限。 演示站点&#xff1a;https://woniu336.github.io/ 魔改hugo主题: https://github.com/woniu336/hugo-magic 2. 服务器配置 建立 git 用户 adduser git安装 git sudo apt …

C/C++ 多线程[1]---线程创建+线程释放+实例

文章目录 前言1. 多线程创建2. 多线程释放3. 实例总结 前言 说来惭愧&#xff0c;写了很久的代码&#xff0c;一个单线程通全部。可能是接触的项目少吧&#xff0c;很多多线程的概念其实都知道&#xff0c;但是实战并没有用上。前段时间给公司软件做一个进度条&#xff0c;涉及…

亲测解决Verifying shim SBAT data failed: Security Policy Violation

在小虎用u盘安装ubuntu系统的时候&#xff0c;笔记本出现了这个问题&#xff0c;解决方法是管关闭security boot。 解决方法 利用F2\F10\F12进入Bios设置&#xff0c;关闭security boot即可。 Use F2 to enter the bios security settings, close it. 参考 Verifying shim…

揭秘Semantic Kernel:用AI自动规划和执行用户请求

在我们日益高效的开发世界中&#xff0c;将任务自动化并智能规划变得越来越必要。今天&#xff0c;我要给大家介绍一个强大的概念——Semantic Kernel中的planner功能。通过这篇文章&#xff0c;我们会学习到planner的工作原理以及如何实现智能任务规划。 什么是planner&#x…

Spring GateWay自定义断言工厂

文章目录 概要整体架构流程最终的处理效果小结 概要 我们在线上系统部署了&#xff0c;灰度环境和生产环境时&#xff0c;可以通过自定义断言工厂去将请求需要路由到灰度环境的用户调用灰度的的服务集群&#xff0c;将正常的用户调用正常集群。 这样&#xff0c;我们可以在上线…

R语言论文插图模板第7期—分组散点图

在之前的文章中&#xff0c;分享过R语言折线图的绘制模板&#xff1a; 柱状图的绘制模板&#xff1a; 本期再来分享一下散点图&#xff08;分组&#xff09;的绘制方法。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中&#xff0c;…

碰撞检测 | 基于ROS Rviz插件的多边形碰撞检测仿真平台

目录 0 专栏介绍1 基于多边形的碰撞检测2 碰撞检测仿真平台搭建2.1 多边形实例2.2 外部服务接口2.3 Rviz插件化 3 案例演示3.1 功能介绍3.2 绘制多边形 0 专栏介绍 &#x1f525;课设、毕设、创新竞赛必备&#xff01;&#x1f525;本专栏涉及更高阶的运动规划算法轨迹优化实战…

【附源码】Python :PYQT界面点击按钮随机变色

系列文章目录 Python 界面学习&#xff1a;PYQT界面点击按钮随机变色 文章目录 系列文章目录一、项目需求二、源代码三、代码分析3.1 导入模块&#xff1a;3.2 定义App类&#xff1a;3.3 构造函数&#xff1a;3.4 初始化用户界面&#xff1a;3.5 设置窗口属性&#xff1a;3.6 …

基于距离度量学习的异常检测:一种通过相关距离度量的异常检测方法

异常通常被定义为数据集中与大多数其他项目非常不同的项目。或者说任何与所有其他记录(或几乎所有其他记录)显著不同的记录,并且与其他记录的差异程度超出正常范围,都可以合理地被认为是异常。 例如上图显示的数据集中,我们有四个簇(A、B、C和D)和三个位于这些簇之外的点:P1、P…

client网络模块的开发和client与server端的部分联动调试

客户端网络模块的开发 我们需要先了解socket通信的流程 socket通信 server端的流程 client端的流程 对于closesocket()函数来说 closesocket()是用来关闭套接字的,将套接字的描述符从内存清除,并不是删除了那个套接字,只是切断了联系,所以我们如果重复调用,不closesocket()…

Agentic Security:一款针对LLM模型的模糊测试与安全检测工具

关于Agentic Security Agentic Security是一款针对LLM模型的模糊测试与安全检测工具&#xff0c;该工具可以帮助广大研究人员针对任意LLM执行全面的安全分析与测试。 请注意 Agentic Security 是作为安全扫描工具设计的&#xff0c;而不是万无一失的解决方案。它无法保证完全防…

C++(11)类语法分析(2)

C(10)之类语法分析(2) Author: Once Day Date: 2024年8月17日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: 源码分析_Once-Day的博客-CSDN博客 …

Python数据结构:集合详解(创建、集合操作)④

文章目录 1. Python集合概述2. 创建集合2.1 使用花括号 {} 创建集合2.2 使用 set() 函数创建集合2.3 创建空集合 3. 集合操作3.1 添加和删除元素3.2 集合的基本操作3.3 集合的比较操作3.4 不可变集合&#xff08;frozenset&#xff09; 4. 综合例子&#xff1a;图书管理系统 Py…