使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理
目录1、前言2、分析3、 实现4、踩坑4.1、拖拽辅助线的坑4.2、数据的坑4.3、限制拖拽4.4、样式调整 1、前言 最近在做一个文件夹管理的功能，要实现一个树状的文件夹面板。里面包含两种元素，文件夹以及文件。交互要求如下： 创建、删除，重命名文件夹和文件 可以拖拽，拖拽文件到文件夹中，或着拖拽文 ... »
Vue-进阶：路由及elementUI组合开发
Vue-router路由 什么是vue-router？ 服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。 然而，在单页面应用中，客户端的 JavaScrip ... »
Vue3中的Ref与Reactive：深入理解响应式编程
前言 Vue 3是一个功能强大的前端框架，它引入了一些令人兴奋的新特性，其中最引人注目的是ref和reactive。这两个API是Vue 3中响应式编程的核心，本文将深入探讨它们的用法和差异。 什么是响应式编程？ 在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新， ... »
Vue学习笔记（六）：监视属性
监视属性是一种用于监视某个数据的变化，并触发相应的回调函数执行的机制。在vue内部，使用“wathch”关键字用于声明监视属性。 ... »
Vue3搭建后台管理系统模板
搭建后台管理系统模板 2.1项目初始化 今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，需要使用husky来做commit拦截，需要使用commitlint来统一提交规范，需要使 ... »
Vue 搭配 Spring MVC 创建一个 web 项目
Vue 搭配 Spring MVC 创建一个 web 项目 想要写一个登录的web应用程序。页面使用Vue，后端使用Spring MVC，最终打成war包，放在tomcat下启动。 1.创建Spring MVC项目，命名loginbackend，配置成web项目。 创建好web项目后，在src/ma ... »
每日一题：vue3自定义指令大全（呕心沥血所作，附可运行项目源码）
1.VUE常用指令大全 本项目所有指令均为全局注册，使用时直接在组件中使用即可。 指令目录：src/directives 页面目录：src/views 具体可查看源码 1.1 权限指令 封装一个权限指令，在模板中根据用户权限来控制元素的显示或隐藏。 permission.js import { re ... »
如何在Vue3中书写TSX
今天小编给大家分享的是如何在Vue3中书写TSX，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。 在vue2的时候就已经可以使用 jsx 语法，但是不是很友好，写起来是一件很痛苦的事情，所以你很少见到有人会在vue2中书写 jsx 语法，官方也 »
Vue组件懒加载
在当今快节奏的数字世界中，网站性能对于吸引用户和取得成功至关重要。然而，对于像首页这样的页面，在不影响功能的前提下优化性能就成了一项挑战。 这就是 Vue 组件懒加载的用武之地。通过将非必要元素的加载推迟到可见时进行，开发人员可以增强用户体验，同时确保登陆页面的快速加载。 懒加载是一种优先加载关键内 ... »
Vue-基本语法及事件绑定
一.基本语法 v-bind绑定： 双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令 代码展示： <div id="app"> <span v-bind:title="message" v-html="tips"> </sp ... »
2023年Vue开发中的8个最佳工具
前言 Vue.js，一款当今非常流行的基于JavaScript的开源框架，旨在构建动态的可交互应用。 Vue.js以其直观的语法和灵活的架构而广受全球开发者的欢迎和赞誉。随着时间的推移，Vue不断进化，为开发者提供更多优秀的工具，以提高他们的效率，构建卓越的应用。 在本文中，小编将为大家介绍八款适用 ... »
Vue-入门vue，及第一个vue程序
一.初始Vue 什么是vue Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可 ... »
Vue源码学习(七):合并生命周期(混入Vue.Mixin)
好家伙, 1.使用场景 现在来,来想一下,作为一个使用Vue的开发者,假设现在我们要使用created(),我们会如何使用 1.1. .vue文件中使用 <template> <div> <h1>{{ message }}</h1> </div> </template> <script> expor ... »
前端远程调试方案 Chii 的使用经验分享
前端远程调试方案 Chii 的使用经验分享 Chii 是与 weinre 一样的远程调试工具 ，主要是将 web inspector 替换为最新的 chrome devtools frontend 监控列表页面可以看到网站的标题链接，IP，useragent，可以快速定位调试页面，监控页信息完善，支 ... »
Vue3+vite路由配置优化(自动化导入)
今天在维护优化公司中台项目时，发现路由的文件配置非常多非常乱，只要只中大型项目，都会进入很多的路由页面，规范一点的公司还会吧路由进行模块化导入，但是依然存在很多文件夹的和手动导入的问题。 于是我想到了我之前使用vuex时进行的模块化自动导入js文件，能不能使用到自动导入.vue文件中去，答案是可以！ ... »
vue如何使用动态组件实现TAB切换效果
本篇文章和大家了解一下vue如何使用动态组件实现TAB切换效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 一、方法1：使用Vant组件库的tab组件 Vant 2 - Mobile UI Components built on Vue 二、 方法2：手动创建tab切换效果 »
少年，该升级 Vue3 了！
Vue2 的终止支持时间是 2023 年 12 月 31 日，本文是一篇 Vue2 升级 Vue3 的指南，可帮助你快速从 Vue2 平滑升级到 Vue3。 ... »
vue3探索——pinia高阶使用
以下是一些 Pinia 的其他高阶功能： storeToRefs()：响应式解构仓库，保证解构出来的数据是响应式的数据。 状态持久化：Pinia 并没有内置的状态持久化功能，但你可以使用第三方库或自定义插件来实现状态的持久化。例如，你可以使用 localStorage 或 sessionStorag ... »
Webpack性能优化 SplitChunksPlugin的使用详解
使用前景 在vue、react等使用webpack为项目打包工具的前端项目，在开发过程中，随着项目功能的逐渐增加，项目整体体积的不断增加，打包的时长和打包后部署的项目体积也在不停的增长，这样可能会导致一下两个问题： 使用自动化部署工具Jenkins部署时，Jenkins因内存不足而崩溃 打包产物过大 ... »
Vue源码学习(五):渲染第四步,生成虚拟dom并将其转换为真实dom
好家伙， 前情提要： 在上一篇我们已经成功将ast语法树转换为渲染函数 现在我们继续 1.项目目录 代码已开源https://github.com/Fattiger4399/analytic-vue.git手动调试一遍, 胜过我解释给你听一万遍 新增文件：vnode/index.js vnode/p ... »