vue3踩坑记第25页

Vue3 + Vite使用Vitepress编辑基于Element-plus再次封装的Vue3基础组件库文档弃用vitepress-theme-demoblock，使用自己封装的Demo组件

最终效果使用方式页面效果一、需求vitepress-theme-demoblock插件在编辑md文件时，不支持TSX模式，也无法import其他依赖，并且展开隐藏的vue代码都在md文件中，不够优雅，且每个md文件太长。至此弃用此拆件，改用自己封装demo组件二、plugins配置：在docs/.vitepress下新建config文件夹1、在config文件夹新建global.ts文件，代码如下

wocwin·2025-04-11 04:48

开源推荐#1：Soybean Admin — 告别粗糙，拥抱优雅的 Vue3 后台管理模板

大家好，我是jonssonyan，你是否还在为搭建后台管理系统而烦恼？每次从零开始，重复造轮子，不仅耗时耗力，最终的界面还可能不尽人意，充斥着各种“历史包袱”？别担心，今天我要向大家安利一个宝藏项目——SoybeanAdmin，它或许能让你眼前一亮，彻底改变你的后台开发体验！GitHub：https://github.com/soybeanjs/soybean-admin什么是SoybeanAdm

jonssonyan·2025-04-10 23:13

更强大、更灵活！ defineModel 重新定义双向绑定

前言在Vue3.4中，defineModel宏的引入标志着Vue双向绑定机制的一次重大革新。

·2025-04-10 18:47

《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第五篇:登录页面优化及使用AI学习代码

致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第五篇:登录页面优化及使用

岫珩·2025-04-10 08:08

Element动态表单中数组循环验证必填方法

干货详细此次项目是使用vue3和elment-plus来实现动态表单验证使用表单组件添加处理人重置保存组件中绑定的数据，包括动态新增表单，删除表单，验证import { ref, reactive

程序员树朦·2025-04-10 04:13

FastAPI + Vue3 对 SSE 通知机制的实现与进阶思考

我的前后端技术栈分别是Vue3和PythonFastAPI。什么是SSE（Server-SentEvents）SSE（Server-SentEvents）是一种浏览器原生

重生之我是蔡经理·2025-04-10 04:42

Module ‘“/src/components/xxx.vue“‘ has no default export.Vetur(1192）自己写的组件在使用时编辑器出现标红

解决办法：扩展插件更换为Vue-Official，1.扩展介绍：“Vue-Official”（全名为"VueLanguageFeatures(Volar)"）是Vue团队推荐的VSCode扩展，专门为Vue3

前端啊龙·2025-04-10 04:42

Docker 拉取镜像部分成功部分失败？

一次代理配置踩坑记录！最近在部署Zitadel身份认证平台的过程中，遇到一个看似“随机”的问题：Docker有些镜像可以拉取，有些却一直超时失败。最终通过配置Docker守护进程级别的代理才解决。

獨梟·2025-04-10 00:48

Vue知识点（5）-- 动画

CSS动画是Vue3中实现组件动画效果的高效方式，主要通过CSStransitions和keyframes动画CSSKeyframes（关键帧动画）用来创建复杂的动画序列，可以精确控制动画的各个阶段。

阿諪諪·2025-04-09 21:53

富文本编辑器wangEditor在vue中实现word内容复制粘贴的技巧？

要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint

2501_90694782·2025-04-09 20:43

实现一个拖拽排序组件：Vue 3 + TypeScript + Tailwind CSS

文章目录一、项目背景与需求分析需求：二、搭建基础项目1.初始化Vue3项目2.安装TailwindCSS三、设计拖拽排序组件1.创建拖拽排序组件2.说明：四、完善样式与功能1.样式调整2.拖拽顺序更新五

前端极客探险家·2025-04-09 18:01

vue3的一些新特性

Vue3是Vue.js框架的重大升级，带来了许多新特性和性能优化。

爱分享的程序员·2025-04-09 11:21

Vue框架的编译器优化

：将模板中的静态分析在编译阶段完成，避免运行时重复计算生成高效渲染函数：输出优化后的虚拟DOM生成逻辑最小化Diff成本：通过标记策略减少虚拟DOM的对比范围提升首次渲染性能：优化静态内容处理逻辑二、Vue3

前端岳大宝·2025-04-09 10:10

Vite + Vue3 + TS项目根路径别名配置

本文博主将介绍如何在Vite+Vue3+TypeScript的前端项目中配置根路径别名，以便在开发过程中更轻松地引用模块和组件。为什么要配置根路径别名？

洛*璃·2025-04-09 07:55

vue项目本地调试使用https

前提是后端的cookie设置在二级域名下，且允许固定其他子域名跨域访问（需要在后端设置）项目框架：vue3，node：v22.13.01、首先在hosts文件中做好域名映射：例如：测试环境域名：oms.test.com

夕秋一梦·2025-04-09 07:54

【基于Vue3组合式API的互斥输入模式实现与实践分享】

基于Vue3组合式API的互斥输入模式实现与实践分享目录背景与痛点设计思路技术实现使用场景与案例遇到的问题与解决方案最佳实践总结1.背景与痛点在表单交互设计中，我们经常面临这样的场景：多种输入方式互斥。

Gazer_S·2025-04-09 05:15

Vue3 视频播放与截图功能实现

视频播放使用HTML5的标签实现，src改成你自己的视频路径。video标签基本属性视频截图功能实现思路1.视频帧捕获：首先，通过元素获取当前播放的视频帧画面，浏览器会将视频解码为连续的图像帧，我们可以通过标签的API访问当前显示的帧。2.Canvas绘制转换：创建一个与视频尺寸相同的Canvas画布，使用Canvas2D上下文（Condext2D）的drawImage()方法将视频帧绘制到画布上

Fri_·2025-04-09 03:27

Vue3在ZKmall开源商城前端的应用实践与技术创新

ZKmall开源商城作为一款企业级电商解决方案，其前端架构基于Vue3实现了高效、灵活的开发模式，结合响应式设计、组件化开发与全链路性能优化，为多端协同和复杂业务场景提供了先进的技术支持。

zkmall·2025-04-09 01:14

【VUE3】Pinia

目录0前言1手动添加Pinia2创建与使用仓库（SetupStore组合式）2.1创建仓库2.2使用仓库数据2.3解构响应式数据3持久化插件0前言官网：Pinia|TheintuitivestoreforVue.js1手动添加Pinia上手之后，可以通过create-vue脚手架勾选Pinia快速添加第一步：安装Pinia在没有Pinia的相目中，执行以下命令npmipinia第二步：在main.

USER_A001·2025-04-08 20:16

Vue3通透教程TS编译配置

Vue3通透教程TS编译配置引言Vue3与TypeScript的结合创建一个支持TypeScript的Vue项目示例一：初始化项目示例二：配置tsconfig.json示例三：编写组件利用TypeScript

DTcode7·2025-04-08 19:07

2025年前端技术栈深度解析

2025年前端技术栈深度解析：Vue生态与高效开发实践前端框架：Vue3与Pinia状态管理Vue3核心优势组合式API：提供更灵活的代码组织方式，逻辑关注点更集中性能优化：Proxy响应式系统比Vue2

Thomas Kant·2025-04-08 18:02

vue3 + elementplus 手动实现 el-table 虚拟滚动

=visibleRange.start&&scope.$index{{scope.row[scope.column.property]}}{{scope.row[scope.column.property]}}-->import{ref,Ref,reactive,onMounted,markRaw,onBeforeUnmount,nextTick,watch}from"vue";constrigh

A_ugust__·2025-04-08 07:48

vue3+electron 桌面应用初始化

1、全局安装vueclinpminstall-g@vue/cli2、使用vuecli初始化vue项目vuecreatemy-vue-project3、添加electron支持vueaddelectron-builder4、启动项目npmrunelectron:serve5、打包项目npmrunelectron:build

土豆丶杨·2025-04-08 07:42

Vue3.2 项目打包成 Electron 桌面应用

本文将详细介绍如何将基于Vue3.2的项目打包成Electron桌面应用。通过结合Electron和VueCLI工具链，可以轻松实现跨平台桌面应用的开发与发布。

A_ugust__·2025-04-08 07:42

vue3实现markdown工具栏的点击事件监听

这里以监听全屏事件为例监听Vditor编辑器的全屏事件要监听Vditor编辑器的全屏事件，你可以使用Vditor提供的API和事件系统。以下是几种实现方法：方法一：使用Vditor的after钩子函数constvditor=newVditor('editor',{after(){//监听全屏事件vditor.vditor.toolbar.elements.fullscreen.addEventLi

Z编程·2025-04-08 05:32

Vue 3 + Element Plus 快速入门教程

本章教程，主要记录如何在vue3框架中引入ElementPlus的具体步骤。

Roc-xb·2025-04-08 04:58

Uncaught ReferenceError: process is not defined

在vue3安装完element-plus，引入了相关文件，启动项目之后，浏览器控制台遇到报错信息：UncaughtReferenceError:processisnotdefined一、原因分析这个错误

Roc-xb·2025-04-08 04:58

vue3中provide和inject详解

在Vue3中，provide和inject是一对特殊的方法，用于在父组件中提供数据或方法，并在子组件中注入这些数据或方法这种。机制使得跨组件通信变得更加便捷，特别是在处理深层嵌套的组件结构时。

Br不二·2025-04-08 00:02

深入理解 Vue 3 的 Provide/Inject：解锁组件通信的新思路

Vue3中的provide和inject是一种用于组件间通信的强大工具，尤其适用于跨越多级组件的传参需求。相较于传统的props和event方法，它提供了一种更优雅的解决方案。

桂月二二·2025-04-08 00:31

Vue3中的Inject用法全解析

大家好呀～今天给大家带来一个超级实用的Vue3技巧：如何使用inject进行组件间的通信！如果你对组件间的数据传递、事件触发感兴趣，那一定不要错过这篇文章哦！话不多说，直接开整～什么是Inject？

风清扬雨·2025-04-07 23:29

Vue3 Composition API即组合式API完全指南

Vue3CompositionAPI完全指南目录组合式API核心概念与选项式API对比setup深度解析响应式API体系生命周期管理逻辑复用模式最佳实践组合式API核心概念定义组合式API（CompositionAPI

智绘前端·2025-04-07 21:43

Vue 3 Composition API 的设计思想

Vue3的CompositionAPI的设计思想围绕以下几个核心目标展开，旨在解决OptionsAPI在复杂场景下的局限性，同时提升代码的可维护性、复用性和类型支持：1.逻辑关注点分离与聚合问题：OptionsAPI

Heidi__·2025-04-07 20:39

Vue3响应式原理解析

Vue3的响应式系统正是实现了这种“自动更新”的能力——当数据变化时，依赖它的视图或计算属性会自动更新。

念九_ysl·2025-04-07 20:07

解决vite+ts 引用本地图片 require问题

因为在vue3中require被放弃使用所有采用一下方式functionget_img_url=(name:any)=>{returnnewURL(`/src/assets/img/${name}`,import.meta.url

wlik·2025-04-07 19:32

【vue3】如何将一组图片快速导入页面，形成一个网页

【vue3】如何将一组图片快速导入页面，形成一个网页constimages=ref({})constimgList=ref([])functiontest(){//我的图片命名为pig1.jpg、pig2

xixixin_·2025-04-07 19:58

Vue3使用Webpack？

Vue3完全支持使用Webpack作为构建工具。

繁若华尘·2025-04-07 07:46

如何在大型项目中组织和管理 Vue 3 Hooks？

众所周知，VueHooks（通常指CompositionAPI中的功能）是Vue3引入的一种代码组织方式，用于更灵活地组合和复用逻辑。但是在项目中大量使用这种写法该如何更好的搭建结构呢？

智绘前端·2025-04-07 07:16

UniApp实现多端支付功能完整实现指南

作者：沈大大更新时间：2025-03-10一、支付功能概述1.1文章要点支付业务流程多端支付实现安全性保障异常处理最佳实践1.2技术栈{"开发环境":"HBuilderX3.8.0+","前端框架":"Vue3

沈大大520·2025-04-07 05:33

Vue2与Vue3不同

Vue3设计思想与核心变化详解一、Vue3设计思想与Vue2差异对比响应式系统重构Vue2实现（基于Object.defineProperty）//在Vue2中，通过data选项返回一个对象，对象中的属性会被

杨-羊羊羊·2025-04-07 02:13

vue3中ref、reactive的使用示例

ref1、导入import{ref}from"vue";2、定义//报告表格数据constreportTableData=ref([]);3、赋值//获取报告信息letresult=awaitreportDataByOuterApplyIdService(tableSelectedRow.value?.outerApplyId);reportTableData.value=result.data;

BillKu·2025-04-07 02:42

裸辞后找工作有多难？分享个人经历+面经+学习路线【内含免费下载初级前端面试题】- 回忆我的2023

个人博客主页一个努力学习的程序猿专栏：HTML和CSSJavaScriptjQueryVueVue3ReactTypeScriptuni-appLinux前端面试分享前端学习+方案分享(VitePress

前端Jerry_Zheng·2025-04-07 00:04

【vue3】黑马小兔鲜儿项目uniapp

https://www.bilibili.com/video/BV1Bp4y1379L?t=198.4&p=13介绍一下启动命令：pnpmrundev:mp-weixin启动项目用的

小宝小白·2025-04-07 00:03

实现一个实时聊天应用：用 Vue 3 和 WebSocket 构建多人在线聊天系统

文章目录一、前言二、技术选型三、功能需求四、实现步骤4.1设置Vue3项目4.2创建WebSocket服务器4.3创建Vue组件4.3.1ChatRoom.vue4.3.2UserList.vue4.3.3Login.vue4.4

前端极客探险家·2025-04-07 00:00

WebSocket 详解：构建一个复杂的实时聊天应用

2.2WebSocket的优点三、搭建WebSocket服务端3.1安装`ws`和`redis`库3.2创建WebSocket服务端3.3创建用户身份验证四、前端实现WebSocket客户端4.1创建Vue3