#vue3

pnpm-vue3-ts：裁剪 / 上传裁剪 / 头像-商品图片处理-图片编辑 / vue-cropper

一、简介Vue-Cropper是一个基于Vue.js的轻量级图片裁剪组件，专为前端项目中的图片裁剪需求设计。它提供了丰富的功能和灵活的配置选项，支持多种图片格式输入和输出，适用于头像裁剪、商品图片处理、图片编辑等场景。二、使用场景用户头像上传：允许用户裁剪并上传符合要求的头像。商品图片处理：电商平台中，用户可裁剪商品主图或详情图。图片编辑工具：集成到图片编辑器中，提供基础裁剪功能。三、集成vue-
快雪时晴-初晴融雪·2025-06-18 04:22

Vue3的Vapor模式有哪些优缺点？

Vue3的Vapor模式作为一项颠覆性技术，具有以下优缺点：优点极致性能消除虚拟DOM开销：直接操作真实DOM，省去虚拟DOM的对比和渲染过程，在高频更新场景（如实时图表、游戏UI）中性能提升显著，甚至接近原生
涔溪·2025-06-17 23:18

[vue vue-router]vue3路由获取请求参数

在使用vue路由的时候，比如有一个tab栏，点击tab栏不同的tab切换。在配置二级路由时，不把id写死，作为路由参数站位routes:[{path:'/',component:Layout,children:[{path:'',component:Home},{//此处我们把id作为一个可变id配置path:'/category/:id',component:Category}]},{path:
·2025-06-17 23:46

vue3实现websocket连接

2025.03.23今天我学习了用vue3实现websocket长连接，代码如下：WebSocketExampleCurrentMessage:{{message}}import{ref,onMounted
AI小奶龙·2025-06-17 22:14

vue3使用scale属性来实现大屏自适应铺满整个屏幕

importdebouncefrom"lodash/debounce";import{computed,reactive}from"vue";letthat=reactive({width:1920,height:1080,scaleX:null,scaleY:null,});letstyleObject=computed(()=>{letobj={transform:`scale(${that.
月伤59·2025-06-17 18:47

vue3-seamless-scroll无缝滚动组件使用

Vue3.0无缝滚动组件，支持Vite2.0，支持服务端打包官网地址：https://github.com/xfy520/vue3-seamless-scrollnpm地址：vue3-seamless-scroll-npm1
月伤59·2025-06-17 18:47

Vue2到Vue3进阶：第二篇 - 响应式系统深度解析

本篇将深入探讨Vue3的响应式系统，从原理到实战全面解析ref、reactive等核心API，帮助你彻底掌握Vue3的响应式机制一、Vue2响应式系统回顾与局限1.1Vue2的Object.defineProperty
踢足球的，程序猿·2025-06-17 16:59

uniapp+vue3+高德地图API实现线路轨迹

1.继上一篇的基础上进行记录，实现基于高德地图API实现线路轨迹上一篇路径：点击链接用到的方法是getDrivingRoute，直接上代码，如下importaMapfrom"@/utils/amap-wx"//这个是你要引入的高德地图SDK//注册高德地图api的keyexportconstinitAMapSdk=()=>{returnnewaMap.AMapWX({key:"你的高德地图KEY"
小杜小杜dxp·2025-06-17 12:36

2025 最新最全 Vite5+Electron+SQLite3+Vue3 工程搭建指南

1组件说明操作系统：windows11组件版本说明Vite5.1.6前端构建工具ESLint9.25.1代码问题发现和修复共建Prettier3.5.3一个流行的开源代码格式化工具TypeScript5.2.2一种由微软开发的自由开源编程语言，它是JavaScript的一个超集Electron30.0.1构建跨平台桌面应用程序的开源框架better-sqlite311.9.1SQLite数据库驱动
食尘者·2025-06-17 12:34

vue3中使用高德地图进行轨迹绘制及播放

1、定义地图容器及操作按钮开始绘制保存路径开始动画暂停动画继续动画停止动画2、引入高德地图，轨迹绘制及播放方法实现importAMapLoaderfrom'@amap/amap-jsapi-loader';import{ref,onMounted,nextTick}from"vue";constpath=ref([]);constcurrent_position=ref([]);letAMap=r
程序员老陈头·2025-06-17 12:03

Vue3中 :deep() 与 :deep 用法区别解析

在Vue3的ScopedCSS中，:deep()用于穿透样式作用域（样式穿透），其括号的使用有明确区别：1.有括号：:deep(selector)（推荐写法）css复制下载:deep(.child-class
·2025-06-17 09:45

uniapp中vue3 ，uview-plus使用!

奈何现在要用vue3，你还不支持。记录一下uview-plus的使用之路吧。uview-plus的地址零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。
养乐多～ch·2025-06-17 05:13

前端开发还不知道Alova？

Alova与Vue3的CompositionAPI深度集成，提供了响应式状态管理、丰富的业务场景策略以及强大的扩展性，特别适合现代前端开发。
菜喵007·2025-06-16 17:53

uniapp+vue3 随机、换一批

案例代码{{index+1}}、{{item.title}}换一批import{onLoad,onShow,onReachBottom}from'@dcloudio/uni-app'importifrom'@/libs/common/index.js'importapifrom'@/request/api.js'import{nextTick,ref,shallowRef,reactive}fro
耶啵奶膘·2025-06-16 16:20

Vue3 + TypeScript 使用 v-bind 动态设置 CSS 样式值

代码解释：ReagentTable.vue......//过期提醒颜色，CSS变量，通过v-bind绑定给元素样式constcssColorVar=ref("#fdd4e5");constcssColorObj=ref({color:"skyblue"});constexpirationReminderColor=useSystemOptionKeyVal("ResourcesExpiration
BillKu·2025-06-16 13:58

Vue3 axios 请求设置 signal 信号属性，以便 abort 取消请求

api：taskMessage.ts//通过用户名（账号），查询任务列表exportconsttaskService=(signal?:AbortSignal)=>{returnrequest.get("/task",{//设置signal信号属性，后续就可以通过abort取消请求signal:signal});};//通过用户名（账号），查询消息列表exportconstmessageServi
BillKu·2025-06-16 13:56

Vue3+ElementPlus实现Table表格的行合并（单个及多个）

实现结果{{dateFormat(row.createTime,'yyyy-MM-dd')}}实现方法interfaceObjInterface{[key:string]:any;//字段扩展声明}/***@description合并表格行*@export*@param{object[]}data表格数据*@param{string}rowName合并行的name*@param{string}ot
小阮的学习笔记·2025-06-16 10:39

Cesium+Vue3教程（007）：基于Vue3+Cesium的添加3D建筑物和标签

文章目录06-添加3D建筑物和标签添加点3D建筑物添加标签与广告牌06-添加3D建筑物和标签添加点实现代码：//创建一个点constpoint=viewer.entities.add({//定位点position:Cesium.Cartesian3.fromDegre
文理棵·2025-06-16 06:42

Vue3+Element Plus 表格多字段组合排序

需求要的效果：问题描述：需求希望表格多字段排序，但是在element-plus里面的表格只支持单列排序所以只能采用自定义排序sort-change监听排序解决方案：加上:header-cell-class-name@sort-change@header-click{handleHeaderCellClass(params,orderArr)}":highlight-current-row="tru
·2025-06-16 03:21

vue3 + element Plus table表格下拉加载数据

点击打开视频讲解地址onMounted(()=>{//监听表格滚动事件//lettable=mutipleTable.value._value.layout.table.refs.bodyWrapper;lettable=document.getElementById('mutipleTable')table.addEventListener("scroll",(res)=>{loadmore(r
咬着拽天下的程序猿·2025-06-16 02:49

Vue 3 前端和 Spring Boot 后端生成 Docker 镜像的标准做法

Vue3前端和SpringBoot后端生成Docker镜像的标准做法：Vue3前端项目生成Docker镜像前提条件Vue项目可以通过npmrunbuild生成静态文件（通常在dist目录）。
yuren_xia·2025-06-15 11:09

vue3 element plus 表格单选，默认选中行、选中、清空

选中第三行清空import{reactive,ref,nextTick}from'vue'constsingleTableRef=ref(null)consttableData=reactive([{date:'2016-05-03',name:'Tom',address:'No.189,GroveSt,LosAngeles',},{date:'2016-05-02',name:'Tom',add
.see you.·2025-06-15 11:38

六、【前端启航篇】：Vue3 项目初始化与基础布局：搭建美观易用的管理界面骨架

【前端启航篇】Vue3项目初始化与基础布局：搭建美观易用的管理界面骨架前言技术选型回顾与准备准备工作第一步：进入前端项目并安装ElementPlus第二步：在Vue3项目中引入并配置ElementPlus
blues_C·2025-06-15 11:38

Vue3学习（6）-Vue3的生命周期和自定义hook

1.Vue3生命周期创建阶段：setup挂载阶段：onBeforeMount、onMounted更新阶段：onBeforeUpdate、onUpdated卸载阶段：onBeforeUnmount、onUnmounted
技术闲聊DD·2025-06-15 11:04

Vue3 实现老虎机抽奖游戏

老虎机抽奖游戏预览地址项目简介老虎机抽奖游戏是一款基于Vue3+Vite+TailwindCSS开发的高颜值、高互动性的抽奖活动前端项目。
伍哥的传说·2025-06-15 10:29

Vue3 响应式翻牌抽奖游戏

翻牌游戏项目预览地址项目简介这是一个基于Vue3开发的现代化卡牌游戏项目，采用最新的前端技术栈，为用户提供流畅的游戏体验。
伍哥的传说·2025-06-15 10:58

Vue3 + TypeScript + Element Plus 设置表格行背景颜色

技术要点：1、使用:row-class-name="setRowClassName"设置表格行类名2、不能同时使用stripe3、设置行类名的样式应用效果：同时使用stripe出来的效果：参考代码：ReagentTable.vue......//设置表格行类名constsetRowClassName=({row,rowIndex}:{row:IReagent;rowIndex:number})=>
BillKu·2025-06-15 06:04

组态软件之万维组态介绍（web组态、html组态、vue2/vue3组态、组态软件、组态编辑器）

一、什么是组态软件组态软件是一种用于创建、配置和管理监控和控制系统的软件工具。组态是指不需要编写计算机程序、通过配置的方式完成工业应用开发的系统。它们通常用于工业自动化领域，用于实时监视和控制工业过程。组态软件提供了丰富的功能和工具，使用户能够创建用户界面、配置数据采集和通信、设置报警和事件处理、进行数据分析和报告生成等。通过组态软件，用户可以实时监控和控制工业设备和过程，并对数据进行可视化和分析
组态软件18786797475·2025-06-15 05:58

vue2/3 - 报错Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are r

问题说明在vue2、vue3项目开发中，启动运行项目时报错：FeatureflagVUE_PROD_HYDRATION_MISMATCH_DETAILSisnotexplicitlydefined.Youarerunningtheesm-bundlerbuildofVue
十一猫咪爱养鱼·2025-06-15 01:05

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.

以下是详细解释和解决方案：‌问题原因‌：该标志是Vue3.4+引入的编译时特性标志，用于控制生产环境下SSR水合不匹配错误的详细报告1使用esm-bundler构建版本时，需要通过打包工具全局注入这些标志以实现更好的
Sahas1019·2025-06-15 01:30

Vue3+TypeScript+Django Rest Framework 搭建个人博客（二）：用户登录功能

用户登录功能是一个信息系统必不可少的一部分，作为博客网站，同样需要管理员登录管理后台，游客注册后登录评论等大家好，我是落霞孤鹜，上一篇我们已经搭建好了前后端的框架的代码，并调通了前后端接口。从这一篇开始，进入到业务功能开发进程中。首先我们需要实现的功能是用户登录，用户登录功能虽然在系统开发中已经很成熟，但是当我们自己动手做的时候，会发现这个功能是那种典型的说起来容易，做起来复杂的功能，需要考虑和处
zgj0607·2025-06-15 00:58

Vite2.x + Vue3.x + Typescript + Element-plus搭建完整的后台管理系统项目

前言听说2021年是vue3.0大爆发的一年话说vue3.0正式版都发布大半年了，你不会对vue3.0还一知半解吧长话不短说，完整版本的vite2.x+vue3.x+typescript+element-plus
阿彪师傅·2025-06-15 00:54

Vue3 快速入门 (四) : 使用路由实现页面跳转

接下来，我们来介绍下，如何在Vue3中，使用路由。2
氦客·2025-06-15 00:52

Vue3组件生成唯一标识符方法

在Vue3中实现每次程序运行时生成相同的随机标识符（即刷新页面后标识符保持不变），需要使用持久化存储技术。
BillKu·2025-06-15 00:21

vue3中defineProps的使用说明

1、数组写法constprops=defineProps(["applyBasicInfo","operateCommandType"]);这是一个非常基础的Vueprops声明方式，适用于简单场景。以下是详细解释：代码含义javascriptconstprops=defineProps(["applyBasicInfo","operateCommandType"]);作用：声明组件接收两个pro
BillKu·2025-06-15 00:21

Vue3+TypeScript实现迭代器模式

Vue3+TypeScript实现迭代器模式：电脑零件清单的灵活遍历迭代器模式（IteratorPattern）听起来是不是有点像“程序员在电脑组装店里拿了个零件清单，挨个检查零件”？
菜喵007·2025-06-14 23:43

Vue3快速入门+axios的异步请求（基础使用）

学习Vue之前先要学习html+css+js的基础使用Vue其实是js的框架常用到的Vue指令包括vue-on,vue-for,vue-blind,vue-if&vue-show,v-modulvue的基础模板：Document{{msg}}import{createApp}from'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createAp
学会沉淀。·2025-06-14 22:07

vue3 setup里获取query params路由携带的参数

import{useRouter}from'vue-router'setup(){constrouter=useRouter()console.log(router.currentRoute.value.query)console.log(router.currentRoute.value.params)通过router.currentRoute.value里的参数获取//路由跳转router.p
不知名前端v2·2025-06-14 22:37

Vue3+TypeScript+Django Rest Framework 搭建个人博客（一）：框架代码初始化

本文适合对有Python语言有一定基础的人群，希望利用Python做更多有意思的事情，比如搭建个人博客，记录自己的所思所想，或者想找一个项目实践前后端分离技术等等。跟着本文可以了解和运行项目，本项目是在Window10Professional系统下开发大家好，我是落霞孤鹜，上一篇介绍了开发博客的背景、技术栈，并介绍了如何搭建开发环境。这一篇介绍后端和前端的基础框架代码初始化，基于Django和Vu
zgj0607·2025-06-14 18:41

Vue3 Hooks 完全指南：从基础用法到异步操作实践

一、引言：为什么需要Vue3Hooks？在Vue3中，CompositionAPI的引入带来了全新的组件开发模式。
꒰ঌ小武໒꒱·2025-06-14 12:57

实现篇：手把手打造一个番茄时钟

代码实现index.html文件styles.css文件script.js文件ManifestFile(manifest.json文件)ServiceWorker(sw.js文件)使用说明功能特点近期文章：Vue3
村头的猫·2025-06-14 06:27

【WebSocket】WebSocket 多功能集成冲突问题解决方案

WebSocket多功能集成冲突问题解决方案在为Vue3+WebSocket项目添加实时通知功能时，遇到了与原有聊天功能的冲突问题。本文记录了问题的分析过程和最终的解决方案。
williamdsy·2025-06-13 23:40

【WebSocket】WebSocket架构重构：从分散管理到统一连接的实战经验

WebSocket架构重构：从分散管理到统一连接的实战经验前言在开发基于Vue3+WebSocket的实时通信系统时，我们遇到了一个看似简单但影响深远的问题：聊天消息能够实时推送，但通知消息却需要刷新页面才能显示
williamdsy·2025-06-13 23:06

vue3项目使用静态资源

在组件中，有时需要引用一些静态资源，例如图片资源、CSS代码资源等。通过项目的public目录和src\assets目录都可以存放静态资源，但引用静态资源的方式不同。public目录public目录用于存放不可编译的静态资源文件，该目录下的文件会被复制到打包目录，该目录下的文件需要使用绝对路径访问。在组件中引用public目录中的demo.png文件，示例代码如下。src\assets目录src\
MoonlitHan·2025-06-13 17:24

【vue3.0学习】 reactive函数 toRef函数

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。演示代码姓名:{{user.name}}年龄:{{user.age}}更新人员import{reactive}from"vue";exportdefault{name:"App",setup(){//定义响应式复杂类型数据需要用reactive包裹constuser=reactive({name:"张三",age:18,});
别亦难�·2025-06-13 17:52

vue3基础ref,reactive,toRef ,toRefs 使用和理解

在Vue3中，ref、reactive、toRef和toRefs是用于响应式数据管理的重要工具。理解它们的使用方式和区别对于有效地利用Vue3的响应式系统至关重要。以下是对这些工具的详细解释和示例。
F2601775592·2025-06-13 16:20

SpringBoot3 + Vue3 前后端分离项目搭建代码

SpringBoot3+Vue3前后端分离项目搭建代码base_manage.zip项目地址:https://gitcode.com/open-source-toolkit/0cb13项目简介本仓库提供了一个基于
·2025-06-13 12:53

vue的图片预览 点击按钮或者别的地方实现大图预览el-image

实现点击按钮或者别的地方能预览大图解决：我使用的是el-image的功能能进行大图预览代码如下//我是用的图片但是你可以写成按钮点击事件//用的是el-image组件提供的功能//这个是方法我用的是vue2用vue3
0716*_zwj·2025-06-13 12:52

vue2/3 - 报错Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a funct

错误描述在vue2|vue3开发，报错：UncaughtTypeError:(0,vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent)isnotafunction
十一猫咪爱养鱼·2025-06-13 07:46

Vue3 + TypeScript + Element Plus 表格行多选与行展开的组合应用实例

场景应用效果：需求特点：1、表格行未选中状态，点击表格行（或点击行内的复选框），选中行，展开行；2、表格行已选中状态，点击表格行（或点击行内的复选框），取消选中行，取消展开行；3、展开行后，表格滚动条设置到当前选中行的位置；代码特点：表格设置展开行的关键信息row-key和expand-row-keysrow-key="id":expand-row-keys="expandedRows":defa
BillKu·2025-06-13 03:19
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他