当前位置：首页 > news >正文

创建一个element plus项目

news 来源：原创 2025/6/30 8:18:27

当然可以！下面是一个 Vue 3 + Element Plus 的最简单完整示例，它包括：

使用 <el-button> 按钮组件
点击按钮后用 ElMessage 弹出提示

✅ 1. 安装并初始化项目（如果还没创建项目）

你可以用官方推荐的方式快速创建 Vue 3 项目：

npm init vue@latest

然后根据提示选择：

✅ Framework: Vue
✅ Variant: JavaScript 或 TypeScript
✅ Router / Pinia / ESLint（可选）

进入项目并安装依赖：

cd your-project-name
npm install

✅ 2. 安装 Element Plus

npm install element-plus

✅ 3. 在入口文件中引入 Element Plus

编辑 src/main.js（或 main.ts）：

import { createApp } from 'vue'
import App from './App.vue'// 引入 Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

✅ 4. 编辑 `src/App.vue`

这是一个最简单的页面，只包含一个按钮和点击提示：

<template><div style="padding: 30px"><el-button type="primary" @click="sayHello">点击我</el-button></div>
</template><script setup>
import { ElMessage } from 'element-plus'const sayHello = () => {ElMessage.success('你好，Element Plus！')
}
</script>

✅ 5. 运行项目

npm run dev

浏览器中会打开页面，点击按钮会弹出提示框：

✅ 你好，Element Plus！

🚀 总结

项目	技术
框架	Vue 3
UI 库	Element Plus（Element UI 的 Vue 3 版本）
功能	显示按钮 + 点击弹窗

创建一个element plus项目

当然可以！下面是一个 Vue 3 Element Plus 的最简单完整示例，它包括： 使用 <el-button> 按钮组件点击按钮后用 ElMessage 弹出提示 ✅ 1. 安装并初始化项目（如果还没创建项目） 你可以用官方推荐的方式快速创建…...

编程日记 2025/6/30 8:18:27

openCV1.1 Mat对象

imread(“D:\souse\duoxile.jpg”, IMREAD_COLOR); 功能: 从指定路径读取图像文件并解码为OpenCV的Mat对象第一个参数: 文件路径类型: const string&描述: 要读取的图像文件的绝对或相对路径示例: “D:\souse\duoxile.jpg” 或 “./images/test.png”第二个参数: 读取模…...

编程日记 2025/6/27 22:50:13

C++：array容器

array容器是序列容器，它的特点是：静态，固定数目。可以看作更安全的数组。它还有一些成员函数，如begin（）：返回指向容器中第一个元素的随机访问迭代器。 #include<iostream>//数组容器 #…...

编程日记 2025/6/29 2:24:48

26、AI 预测性维护 (燃气轮机轴承) - /安全与维护组件/ai-predictive-maintenance-turbine

76个工业组件库示例汇总 AI 预测性维护模拟组件 (燃气轮机轴承) 概述这是一个交互式的 Web 组件，旨在模拟基于 AI 的预测性维护 (Predictive Maintenance, PdM) 概念，应用于工业燃气轮机的关键部件（例如轴承）。它通过模拟传感器数据、动态预测剩余使用寿命 (RUL)，并根…...

编程日记 2025/6/27 23:39:16

特种兵参会

出发（5.15） 有了去年去5月去深圳参加OpenTenBase工委会成立的经验，今年这个时候去广州就一定要在下午16点前起飞。恰好到了候机口有蔚来的牛屋，进去躺了一会。飞机顺利到达广州。晚上小聚总监约了祁总，我们相识多年&…...

编程日记 2025/6/28 22:14:31

手搓四人麻将程序

一、麻将牌的表示在麻将游戏中，总共有一百四十四张牌，这些牌被分为多个类别，每个类别又包含了不同的牌型。具体来说，麻将牌主要包括序数牌、字牌和花牌三大类。序数牌中，包含有万子、条子和筒子，每种花色…...

编程日记 2025/6/27 23:27:36

一命通关单调栈

前言我们只是卑微的后端开发。按理说，我们是不需要学这些比较进阶的算法的，可是，这个世界就是不讲道理。最开始，想法是给leetcode中等题全通关，我又不打ACM我去天天钻研hard干嘛，于是碰见单调栈树状数组的…...

编程日记 2025/6/27 23:29:02

NV009NV010美光闪存颗粒NV011NV012

NV009NV010美光闪存颗粒NV011NV012 美光NV009-NV012闪存颗粒技术解析与行业应用全景一、核心技术架构与制程突破美光NV009至NV012系列闪存颗粒基于第九代3D TLC架构，通过垂直堆叠技术突破传统2D平面存储的物理限制。该架构将存储单元分层排列，如同将…...

编程日记 2025/6/28 23:21:57

线程、线程池、异步

目录什么是线程什么是线程池什么是异步异步与线程关系 JS中的异步什么是线程线程 Thread 是计算机执行的最小单位，是进程内的一个实体，可以被操作系统独立调用和执行线程可以理解为进程内的“程序执行流”，一个进程可以包含多…...

编程日记 2025/6/29 8:03:27

docker面试题（4）

Docker与Vagrant有何不同两者的定位完全不同 Vagrant类似于Boot2Docker（一款运行Docker的最小内核），是一套虚拟机的管理环境，Vagrant可以在多种系统上和虚拟机软件中运行，可以在Windows、Mac等非Linux平台上为Docker…...

编程日记 2025/6/27 23:34:49

双检锁（Double-Checked Locking）单例模式

在项目中使用双检锁（Double-Checked Locking）单例模式来管理 JSON 格式化处理对象（如 ObjectMapper 在 Jackson 库中，或 JsonParser 在 Gson 库中）是一种常见的做法。这种模式确保了对象只被创建一次，同时在…...

编程日记 2025/6/29 9:20:48

建立java项目

java端: 在idea里面新建一个java,maven项目(springboot): 注意:JDK与java都得是一样的添加基本的依赖项: 也可以在pom.xml中点击这个,从而跳转到添加依赖建立三层架构: 在相应的java类中添加代码: <1.UserController package com.example.demo.controller;import com…...

编程日记 2025/6/29 11:02:32

Go语言内存共享与扩容机制 -《Go语言实战指南》

切片作为 Go 中的高频数据结构，其内存共享机制和自动扩容策略直接影响程序性能与行为，深入理解这两者，是高效使用切片的关键。一、切片的内存结构回顾切片是对底层数组的一个抽象，其本质是一个结构体： type slice …...

编程日记 2025/6/27 22:58:52

如果教材这样讲--单片机IO口Additional Functions和 Alternate Functions的区别

不管是硬件工程师还是嵌入式软件工程师，都应该能够熟练的看懂数据手册，尤其是英文。在设计单片机外围电路时，工程师需要了解单片机的GPIO口的各项功能来满足自己的设计需求，单片机小白们在查看单片机数据手册时，看到Ad…...

编程日记 2025/6/27 23:29:35

《Effective Java（第三版）》笔记

思维导图 1-4章 5-8章 9-12 章资料源码：https://github.com/jbloch/effective-java-3e-source-code...

编程日记 2025/6/27 23:34:39

实践大模型提示工程(Prompt Engineering)

任务目标本文将结合实战营中的具体案例，分享在提示词设计、模型调用及复杂任务拆解中的实践心得，希望能为读者打开一扇通往 AI 开发实战的窗口。书生浦语官方链接实践一——写一段话介绍书生浦语实战营在提示工程中，第一点给出清晰的…...

编程日记 2025/6/27 17:52:42

东莞一锂离子电池公司IPO终止，客户与供应商重叠，社保缴纳情况引疑

作者：小熊来源：IPO魔女 5月17日，深交所发布公告称，东莞市朗泰通科技股份有限公司（简称朗泰通科技）已主动撤回其IPO申请。该公司本次IPO原拟募集资金7.0208亿元，保荐机构为国金证券股份有限公…...

编程日记 2025/6/27 23:02:12

互联网大厂Java求职面试：Spring Cloud微服务架构与AI集成挑战

互联网大厂Java求职面试：Spring Cloud微服务架构与AI集成挑战引言在当前快速发展的互联网行业中，Java开发者在面对复杂的分布式系统设计时，需要掌握从微服务架构到AI模型集成的多种技能。本文通过一场模拟面试，深入探讨了基于…...

编程日记 2025/6/29 19:39:50

解决C#泛型类参数无法带参数实例化的问题

概要本文提供了一个基于C#表达式目录树的方法来解决泛型参数不能调用带参数的构造方法来实例化的问题。 C#泛型的限制我们看如下的代码，User类需要一个泛型类，泛型类是要以CreditCard为基类。 class User<T> where T :CreditCard, new() {pr…...

编程日记 2025/6/30 4:16:12

微型化GNSS射频前端芯片AT2659S：L1频段多系统支持，SOT23-6封装

AT2659S是一款采用SiGe技术的低噪声放大器（LNA），相比传统CMOS工艺，它在功耗和噪声性能上进行了显著优化。该芯片支持L1频段的多模卫星导航系统，包括北斗二代、GPS、伽利略和Glonass，适用于高灵敏度的GNSS接…...

编程日记 2025/6/27 23:01:12

【图像大模型】深度解析RIFE: 基于中间流估计的实时视频插帧算法

基于深度学习的视频插帧算法RIFE技术解析与实战指南一、项目背景与技术原理1.1 视频插帧技术概述1.2 RIFE核心创新1.3 算法原理详解1.3.1 网络架构1.3.2 损失函数设计1.3.3 时间自适应训练二、项目部署与执行指南2.1 环境配置2.2 模型推理2.2.1 快速测试2.2.2 视频处理 2.3 模…...

编程日记 2025/6/29 9:00:29

Docker安装Fluentd采集中间件

Fluentd 简介 ：Fluentd 是一个高性能、可扩展的数据收集与聚合工具，能够统一数据收集和消费，实现各种数据源到各种数据接收器的高效传输，广泛应用于日志收集等领域。功能特点 ： 统一日志收集 ：支持从各种…...

编程日记 2025/6/30 1:31:17

【攻防实战】MacOS系统上线Cobalt Strike

如果巅峰留不住，那就重走来时路前言目前在一些攻防项目中遇到的互联网大厂，很多员工使用的都是MacOS主机。研究过程中发现网上这方面分享比较少，这里记录分享一下。插件安装配置cna基础文件，注意路径名不能包含中文或特殊…...

编程日记 2025/6/29 5:47:02

基于Resnet-34的树叶分类（李沐深度学习基础竞赛）

目录一，数据集介绍 1.1 数据集下载 1.2 数据集介绍二，Resnet-34介绍三，模型训练四，模型预测五，测试结果 5.1 测试集结果 5.2 预测结果 5.3 总结一，数据集介绍 1.1 数据集下载本数据集下载…...

编程日记 2025/6/29 2:58:44

PCB设计实践（二十三）什么是阻抗匹配，需要做啥

PCB设计中的阻抗匹配是高速数字电路、射频通信、信号完整性等领域的核心技术，其重要性贯穿从基础理论到复杂系统设计的全流程。本文将从工程实践角度深入探讨阻抗匹配的本质原理、应用场景、设计方法、常见误区及解决方案，全面解析这一影响现代电子设备性…...

编程日记 2025/6/27 23:04:39

网络世界的“变色龙“：动态IP如何重构你的数据旅程？

在深秋的下午调试代码时，我偶然发现服务器日志中出现异常登录记录——IP地址显示为某个境外数据中心。更有趣的是，当我切换到公司VPN后，这个"可疑IP"竟自动消失在了防火墙监控列表中。这个瞬间让我意识到：现代网络架构中…...

编程日记 2025/6/27 23:34:31

Chrome浏览器捕获hover元素样式

–前言– 某些元素，只有hover上去才会看到触发效果，但是鼠标移开就找不到element元素，导致无法调试样式。下属两种方案可参考： 文章目录一、方式1：通过class伪类触发二、方式2：通过断点调试2.1控制台切换到…...

编程日记 2025/6/30 1:14:05

嵌入式自学第二十五天（5.21）

（1）二进制文件读写操作： 例： #include<stdio.h> int main() { FILE *fp fopen("a.out","r"); FILE *fp1 fopen("app","w"); if(NULL fp || NULL fp1) { …...

编程日记 2025/6/27 23:35:07

golang库源码学习——Pond，小而精的工作池库

pond 是一个轻量级的 Goroutine 池库，用于高效管理并发任务。它提供了灵活的配置选项和多种策略，适合处理高并发场景。 GitHub - alitto/pond at v1 一、特点： 1.轻量级 pond 的代码库非常精简，它的V1版本仅有四个业务文件&#…...

编程日记 2025/6/27 10:52:38

Microbiome医口经典思路：退烧药物代谢过程如何进行多组学分析？

乙酰氨基酚（APAP），俗称扑热息痛，是应用最广泛的镇痛和解热药物之一。以往的研究主要集中在分离APAP降解菌株，了解其降解代谢途径。但微生物群与对乙酰氨基酚之间的相互作用、对乙酰氨基酚降解基因的分布特征以及对乙酰…...

编程日记 2025/6/27 23:36:07

微信小程序AI大模型流式输出实践与总结

背景让Cursor生成小程序中大模型调用内容回复的流式输出时一直有问题，参考整理此文章。参考原文：https://blog.csdn.net/weixin_47684422/article/details/145859543 一、什么是流式传输？ 流式传输（Streaming）指的…...

编程日记 2025/6/27 23:39:36

操作系统理解（xv6）

xv6操作系统项目复习笔记宗旨：只记大框架，不记细节，没有那么多的时间一、xv6的页表是如何搭建的？ xv6这个项目中，虚拟地址用了39位（27位12位（物理内存page偏移地址）&#xff09…...

编程日记 2025/6/27 22:50:31

2024CCPC辽宁省赛个人补题 ABCEGJL

Dashboard - 2024 CCPC Liaoning Provincial Contest - Codeforces 过题难度 B A J C L E G 铜奖 4 953 银奖 6 991 金奖 8 1664 B： 模拟题 // Code Start Here string s;cin >> s;reverse(all(s));cout << s << endl;A：很…...

编程日记 2025/6/27 23:00:45

Sentinel原理与SpringBoot整合实战

前言随着微服务架构的广泛应用，服务和服务之间的稳定性变得越来越重要。在高并发场景下，如何保障服务的稳定性和可用性成为了一个关键问题。阿里巴巴开源的Sentinel作为一个面向分布式服务架构的流量控制组件，提供了从流量控制、熔断降级、…...

编程日记 2025/6/27 23:13:33

Python 训练营打卡 Day 31

文件的规范拆分和写法把一个文件，拆分成多个具有着独立功能的文件，然后通过import的方式，来调用这些文件。这样具有几个好处： 可以让项目文件变得更加规范和清晰可以让项目文件更加容易维护，修改某一个功能的时候&a…...

编程日记 2025/6/29 5:43:16

vue+srpingboot实现多文件导出

项目场景： vuesrpingboot实现多文件导出解决方案： 直接上干货 <el-button type"warning" icon"el-icon-download" size"mini" class"no-margin" click"exportSelectedFiles" :disabled"se…...

编程日记 2025/6/27 23:25:15

学习 Pinia 状态管理【Plan - May - Week 2】

一、定义 Store Store 由 defineStore() 定义，它的第一个参数要求独一无二的id import { defineStore } from piniaexport const useAlertsStore defineStore(alert, {// 配置 })最好使用以 use 开头且以 Store 结尾 (比如 useUserStore，useCartStore&a…...

编程日记 2025/6/27 17:19:40

linux中cpu内存浮动占用，C++文件占用cpu内存、定时任务不运行报错(root) PAM ERROR (Permission denied)

文章目录说明部署文件准备脚本准备部署g++和编译脚本使用说明和测试脚本批量部署脚本说明执行测试定时任务不运行报错(root) PAM ERROR (Permission denied)报错说明处理方案说明我前面已经弄了几个版本的cpu和内存占用脚本了，但因为都是固定值，所以现在重新弄个用C++编写的…...

编程日记 2025/6/27 23:38:14

数据湖和数据仓库的区别

在当今数据驱动的时代，企业需要处理和存储海量数据。数据湖与数据仓库作为两种主要的数据存储解决方案，各自有其独特的优势与适用场景。本文将客观详细地介绍数据湖与数据仓库的基本概念、核心区别、应用场景以及未来发展趋势，帮助读者更好地…...

编程日记 2025/6/30 1:25:48

OceanBase 开发者大会，拥抱 Data*AI 战略，构建 AI 数据底座

5 月 17 号以“当 SQL 遇见 AI”为主题的 OceanBase 开发者大会在广州举行，因为行程的原因未能现场参会，仍然通过视频直播观看了全部的演讲。总体来说，这届大会既有对未来数据库演进方向的展望，也有 OceanBase 新产品的发布&#…...

编程日记 2025/6/27 23:32:12

鸿蒙HarmonyOS最新的组件间通信的装饰器与状态组件详解

本文系统梳理了鸿蒙（HarmonyOS）ArkUI中组件间通信相关的装饰器及状态组件的使用方法，重点介绍V2新特性，适合开发者查阅与实践。概述鸿蒙系统（HarmonyOS）ArkUI提供了丰富的装饰器和状态组件，用…...

编程日记 2025/6/29 0:43:18

OneDrive登录，账号跳转问题

你的OneDrive登录无需密码且自动跳转到其他账号，可能是由于浏览器或系统缓存了登录信息，或存在多个账号的关联。以下是分步解决方案： 方案三对我有效。强制手动输入密码访问登录页面时： 在浏览器中打开 OneDrive网页版。点击…...

编程日记 2025/6/29 16:51:21

9-码蹄集600题基础python篇

题目如上图所示。这一题，没什么难度。代码如下： def main():#code here# x,amap(int,input("").split(" "))# sum((1/2)*(a*x(ax)/(4*a)))# print(f"{sum:.2f}")x,amap(int,input().split())print(f"{((1/2)*(a*…...

编程日记 2025/6/29 2:36:48

CAU人工智能class3 优化器

优化算法框架优化思路随机梯度下降随机梯度下降到缺点： SGD 每一次迭代计算 mini-batch 的梯度，然后对参数进行更新，每次迭代更新使用的梯度都只与本次迭代的样本有关。因为每个批次的数据含有抽样误差，每次更新可能并不会 …...

编程日记 2025/6/27 23:07:58

学习 Android（十一）Service

简介在 Android 中，Service 是一种无界面的组件，用于在后台执行长期运行或跨进程的任务，如播放音乐、网络下载或与远程服务通信。Service 可分为“启动型（Started）”和“绑定型（Bound）”两大…...

编程日记 2025/6/29 1:59:25

SpringAI开发SSE传输协议的MCP Server

SpringAI 访问地址：Spring AI ‌ Spring AI‌是一个面向人工智能工程的应用框架，由Spring团队推出，旨在将AI能力集成到Java应用中。Spring AI的核心是解决AI集成的根本挑战，即将企业数据和API与AI模型连接起来‌。 MCP…...

编程日记 2025/6/28 21:57:07

【泛微系统】后端开发Action常用方法

后端开发Action常用方法代码实例经验分享：代码实例经验分享：本文分享了后端开发中处理工作流Action的常用方法，主要包含以下内容：1) 获取工作流基础信息，如流程ID、节点ID、表单ID等；2) 操作请求信息，包括请求紧急程度、操作类型、用户信息等；3) 表单数据处理，展示…...

编程日记 2025/6/27 15:40:11

如何成为更好的自己？

成为更好的自己是一个持续成长的过程，需要结合自我认知、目标规划和行动力。以下是一些具体建议，帮助你逐步提升： 1. 自我觉察：认识自己反思与复盘：每天花10分钟记录当天的决策、情绪和行为，分析哪些做得…...

编程日记 2025/6/29 20:10:14

精益数据分析（74/126）：从愿景到落地的精益开发路径——Rally的全流程管理实践

精益数据分析（74/126）：从愿景到落地的精益开发路径——Rally的全流程管理实践在创业的黏性阶段，如何将抽象的愿景转化为可落地的产品功能？如何在快速迭代中保持战略聚焦？今天，我们通过Rally软…...

编程日记 2025/6/27 23:18:33

网站制作公司哪家强？(2025最新版)

在数字化时代，一个优质的网站是企业展示自身实力、拓展业务渠道的重要工具。无论是初创企业还是大型集团，都需要一个功能强大、设计精美的网站来吸引客户、提升品牌形象。但面对市场上众多的网站制作公司，如何选择一家靠谱的合作伙伴呢&#…...

编程日记 2025/6/27 13:57:30