- 博客(154)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Vue2-封装一个看起来像左右分布表格的表单组件
【摘要】本文展示了一个基于Element UI的动态表单组件实现方案，通过权限控制实现表单的只读/编辑模式切换。核心功能包括：1)根据编辑权限显示表格或表单控件；2)支持20+种表单元素类型（输入框、选择器、日期选择器等）；3)采用响应式栅格布局；4)支持自定义插槽和验证规则。组件通过v-model绑定数据，采用el-form容器管理表单验证，实现了高度可配置化的动态表单解决方案，适用于各类后台管理系统。
2025-07-30 09:41:41
216
原创 Vue2-封装一个含所有表单控件且支持动态增减行列的表格组件
本文介绍了一个基于Element UI的动态表格组件，主要实现了三种核心功能：1) 根据用户权限显示普通表格或可编辑表格；2)支持动态新增行和列；3)提供丰富的表单控件支持。无权限时显示只读表格，有权限时则嵌入表单控件实现编辑功能。组件通过条件渲染区分权限状态，并封装了行/列增减、数据校验等核心方法。表格支持多种表单控件类型（输入框、选择器、日期选择等）和自定义插槽，同时保持了对Element Table原有功能的兼容性。该组件通过严格的数据绑定和事件机制确保数据一致性，并优化了性能避免不必要的重渲染。
2025-07-28 16:30:03
288
原创 react 使用 postcss-px-to-viewport 实现 px 自动转 vw 自适应
摘要：本文介绍了在React+Next.js项目中实现全屏自适应布局的解决方案。通过使用postcss-px-to-viewport插件，将px单位自动转换为vw视口单位，确保页面在不同屏幕尺寸下都能完整显示且不出现滚动条。文章详细说明了插件的安装步骤、postcss配置文件设置以及必要的Next.js配置修改，最终实现了完美的响应式布局效果。
2025-06-13 09:58:19
397
原创 【踩坑】本地软链接pnpm link 没生效
今天在本地调试组件库，用软链接在项目中直接使用，各种方法都尝试了，怎么也不生效，最后一顿操作好起来了，记录一下。一、手动删掉 node_module 文件夹下的组件库（因为本来我们使用npm下载下来的）三、重新链接 pnpm link --global <组件库名>二、用命令 pnpm uninstall <组件库名> 删干净。
2025-06-11 15:00:15
179
原创 常用模块看板
在公司内部每天都要使用的系统中添加常用模块看板，可以让工程师知道自己经常使用的是哪个模块，点击直接跳转，提供了快速访问核心功能的入口，非常方便，提高工程师的操作效率与使用体验。
2025-05-09 10:32:05
444
原创 Vue 多附件表单非空校验
当前有一个表单，里面一共有 9 个附件字段，如发布文档、检查文档、项目公示......，并且每个字段都是必填，也就是9个附件都为必填项。
2025-04-18 09:57:29
296
原创 【踩坑】GitHub Actions 运行的 Linux 环境中，文件名是大小写敏感的
这次解决问题的经历让我深刻认识到在跨环境开发和部署过程中，一些看似微不足道的细节可能会引发严重的问题。文件名大小写敏感就是一个很容易被忽视的点，尤其是在本地开发环境（如 Windows）对文件名大小写不敏感的情况下。同时，详细的日志记录和逐步排查问题的方法也非常重要，它们能帮助我们快速定位到问题的关键所在，提高解决问题的效率。
2025-04-10 14:58:26
914
原创 Vue 中 data 与 computed 设置属性的差异及解决方法
如果需要根据其他响应式数据动态计算一个值，应该使用computed属性，而不是在data选项中进行一次性的计算。
2025-03-06 10:45:23
1888
原创 修复Vue打包时栈溢出：FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
打包时报错：从终端输出内容可知，在执行命令期间，项目构建进程因 JavaScript 堆内存不足而崩溃。表明构建进程在运行时耗尽了分配给 Node.js 的内存，从而导致程序崩溃。
2025-03-04 15:27:42
563
原创 npm/pnpm软链接
在前端开发的过程中，高效管理项目依赖是提升开发效率的关键。npm（Node Package Manager）和 pnpm（Performant npm）作为常用的包管理工具，它们的软链接功能为开发者提供了灵活且强大的依赖管理方式。下面我们将深入探讨 npm 和 pnpm 软链接的使用方法，并通过具体的代码示例来详细说明。
2025-02-20 09:14:55
1728
原创 gitlab 还原合并请求
事情是这样的：菜鸡从 test 分支切了个名为 pref-art 的分支出来，发布后一机灵，发现错了，于是在本地用 git branch -d pref-art 将该分支删掉了。之后切到了 prod 分支，再切出了一个相同名称的 pref-art 分支出来，然后在此进行开发。要上线了，于是通过 gitlab 创建合并请求进行合并，看到绿色无冲突也就！超！大！胆！地直接点了确定合并，疏忽了看一下这个很离谱的变动。毫无疑问，一上线就出问题了，需要紧急回退。
2024-12-30 14:30:36
1057
原创 Vue2项目表单初始化后无法编辑的问题
今天遇到了一个很诡异的问题，已经有近 3 个月事件没有去动过的模块，突然就有 bug 了？？？咱也不知道是 why，总之情况就是这么一个情况：1、一个新增表单，原先打开一切正常，字段也都可以填写。2、一旦搜索项目，从远程获取回来数据，初始化好表单，就会发现，所有字段都无法填了。依然不行......
2024-09-10 16:14:35
639
1
原创 【踩坑】Vue3项目正常跑动后页面空白问题
近期踩了个坑，Vue3搭建的项目能够正常跑动，但是页面却是空白的，控制台也不报错，只留下一行警告：发现是 router 入口文件（一般是在 router 文件夹下的 index 里面）的写法和 vite 版本不匹配的问题。随着 Vite 版本的更新，一些 API 可能会发生变化或被弃用，这会导致在升级 Vite 或项目迁移时遇到兼容性问题。我遇到的问题正是因为 Vite 的版本更新导致了 import.meta.globEager 的使用方式变化。
2024-09-07 08:49:21
1781
原创 pnpm install 后还是没有生成 pnpm-lock.yaml 文件
我删除了pnpm-lock.yaml文件，以便获得最新的依赖项 运行 pnpm i 命令，以便生成具有最新依赖项的新 pnpm-lock.yaml。但不幸的是 pnpm-lock.yaml 没有生成。于是乎，直接执行 pnpm i --lockfile-only。不管如何尝试 pnpm i ，就是没有lock文件，烦鼠了。
2024-08-17 20:05:57
1664
原创 使用MicroApp重构旧项目
随着技术的飞速发展，我们公司内部一个基于“上古神器” jQuery + PHP 构建的十年历史老项目已显力不从心，技术非常老旧且维护成本高昂，其实已经无数次想要重构，但是苦于历史遗留原因以及业务的稳定性而一直难以下手，而且一时半会又不能全部重构。
2024-08-15 17:32:04
1534
原创 微前端插件 v-micro-app-plugin
v-micro-app-plugin 是一款基于京东MicroApp框架的微前端插件，旨在帮助开发者快速地将微应用集成到不同的系统中，实现高效、灵活的前端模块化开发。以下是详细的使用指南，帮助你快速上手。
2024-08-15 17:31:52
1075
原创 【踩坑】TypeScript 中使用 sass 动态设置样式
在从 Vue2 项目转向 Vue3 项目时，不得不将已经封装好的 echarts 图表也升级成 Vue3 适配的版本，遇到了一个有些诡异的问题，在此记录一下。
2024-08-08 19:22:33
624
原创 .gitignore 忽略文件不生效如何处理？
近期因为写了一个自动打包发布脚本，需要再项目中增加一个 uses.ts 文件，里面记录了用户名、密码、服务器地址、文件夹等等信息，虽然确实是方便了很多，但是跑完流程后，发现这样会有安全问题，太多关键信息上传到代码库上去了，于是我赶紧。
2024-08-08 09:55:45
870
原创 使用Gitlab实现monorepo多项目CICD
CI/CD（Continuous Intergration/Continuous Delpoy），即持续集成/持续部署，或称为持续集成/持续交付，作为一套面向开发和运维团队的解决方案，CI/CD 主要解决集成新代码和向用户频繁交付应用的问题。更直接地说，就是可以解放开发人员的双手，将时间和精力专注于代码本身。传统的前端部署往往都要经历：本地代码更新本地打包项目清空服务器相应目录上传项目包至相应目录几个阶段，这些都是机械重复的步骤，并且手动操作非常容易出错。对于这一过程，我们往往可以通过CI/CD。
2024-08-08 09:06:57
1458
原创 ts-node报错ERR_UNKNOWN_FILE_EXTENSION
package.json 中的 "type": "module", 依然保留，然后进行以下操作进行解决。删掉，那么就跑不动，也 build 不了，但是能 deploy 成功。在网上寻找了很多很多很多种解决方案，最终发现， 只要在。，那么就可以跑也可以 build，但是却无法 deploy。但是呢，新的问题出现了，项目跑不动了呀！删除后，项目它就跑不动了！删除，问题就解决了。
2024-08-06 20:46:17
1103
原创 前端渲染模式
在Web开发中，渲染（Rendering）是一个核心概念，指的是将应用程序的数据（data）与模板（template）结合，生成最终的HTML页面，这个页面随后会被浏览器解析并展示给用户。这个过程是动态Web应用的核心，因为它允许开发者根据不同的数据动态地生成页面内容，而不是每次更改都需要手动编写静态的HTML文件。 我们可以简单地把渲染理解为：渲染就是将页面数据和页面模版组装成html的过程
2024-07-27 19:25:58
2024
原创 从0到1搭建一个组件库
最近我开启了一个新项目，基于echarts进行二次封装，希望能为Vue3项目量身打造一套高效、易用的图表组件库，取名为 v-echarts。目前雏形已经搭建完成，先把整个搭建过程做一个记录。后续再持续迭代、完善该图表组件库。笔者在搭建自己的组件库时，趁着项目当前足够空白，专门切出了一个 demo 分支，存下来当做模板以备不时之需。可以切换到 demo 分支，查看比较干净的项目代码。
2024-07-25 16:36:39
1171
3
原创 Vue3 对比 Vue2
Vue2.x 项目架构对于 Weex（移动端跨平台方案）和 myvue（小程序上使用）等渲染到不同平台（跨平台渲染）不太友好，因为 Vue 2.x 的核心是为 Web 平台设计的，不同平台有不同的运行时环境和渲染机制，而 Vue 2.x 的核心库并没有直接支持这些差异。Vue3.X 推出了自定义渲染API（也称为运行时核心或），允许开发者编写与平台无关的 Vue 代码，并通过不同的渲染器将这些代码转换为特定平台可以理解的格式，解决了该问题。下面，我们先来看看Vue2和Vue3的入口文件写法有哪些不同。
2024-07-20 19:37:48
1747
原创 transition 过渡动画出现抖动的问题
最近在系统右下角加了一个智能客服的图标，用于接入gpt。理想的效果是：原先显示30px的小图标，当鼠标悬浮时，图标就向左上方移动并且变大到1.5倍。然鹅，效果并不稳定，有些时候会疯狂抖动，体验感不好。
2024-07-19 14:49:39
819
原创 微前端解决方案
优点：CSS和JavaScript天然隔离，避免了样式冲突和脚本污染，拥有对应的用于单独部署子应用组件的域名多个子应用可以并存，支持并行开发和独立部署代码的可读性变得非常清晰，组件资源内部高内聚，组件资源由自身加载控制原生浏览器支持，不依赖于特定的框架或库缺点：浏览器和框架的支持不够：浏览器实现不一致，存在向后不兼容的版本问题，需要额外的polyfills支持开发成本较高：需要重写现有的前端应用，在整个前端应用上把它们全部转换成Web Components。
2024-07-13 18:54:46
2025
原创 微前端基础知识
微前端借鉴了微服务的架构理念，它既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活，有一个基座应用（主应用），来管理各个子应用的加载和卸载，所以微前端不是指具体的库，不是指具体的框架，不是指具体的工具，而是一种理想与架构模式，微前端的核心三大原则：独立运行、独立部署、独立开发。
2024-07-13 18:48:27
1447
原创 Vue中的Mixins与钩子函数：理解合并与调用
首先，让我们简要回顾一下mixins的概念。在Vue.js的架构中，mixins是一种允许开发者跨多个组件共享代码片段的机制。通过将可复用的功能封装在mixin对象中，我们可以轻松地在多个组件中引入这些功能，而无需重复编写相同的代码。当组件使用mixins时，所有mixins对象的选项将被“混入”该组件本身的选项中。
2024-07-12 16:57:59
876
原创 使用patch-package自动修改node_modules中的内容/打补丁
在使用VuePress搭建个人博客的过程中，我需要使用到一个用来复制代码块的插件uepress-plugin-nuggets-style-copy。问题：插件可以正常安装，但是启动会报错。通过查看错误信息，定位是插件中的copy.vue文件出现错误，在网上查找方法，发现是通过打补丁修改插件源码的方式来解决报错的问题。
2024-07-02 14:27:56
1310
2
原创 Vue页面内容未保存时离开页面做弹框提示
一、背景一、背景目标：如果当前页面中有正在编辑中的内容，那么此时切换组件、跳转路由、关闭标签页、刷新页面，都会有离开确认提示，防止用户因误触导致填写的内容白费。后台管理系统中有许多需要填写的表单，弹窗方式的表单一般都会关掉或提交，而单页个面的表单，有时候会忘记暂存或提交，直接离开页面，导致千辛万苦填写的内容全部置空，这是非常不友好的！！！于是，需要实现一个功能：如果当前页面中存在编辑中的内容，那么离开页面之前，要弹窗提示用户是否确认离开。二、实现。
2024-06-14 14:10:23
2832
1
原创 React学习笔记
React 的三大特性：数据驱动 -> 单向数据流在React中，一切皆数据。要想改变界面元素或更改DOM节点，只需修改数据即可。但不要轻易操作DOM节点。所有的数据都用state来管理，分为组件state和全局state。数据只能从State流向DOM，不能逆向更改。函数式编程(声明式编程) = 组件化 + JSX纯函数：函数的输出不受外部环境影响，同时也不影响外部环境。非纯函数：输入相同，输出不同的函数。函数的柯里化：将一个低阶函数转换为高阶函数的过程。
2024-05-31 16:14:57
744
原创 系统权限控制基础知识
当需要调整用户的权限时，管理员只需修改用户的角色分配，而无需逐个修改用户的许可权，从而大大简化了权限管理过程。RBAC(Role-BasedAccess Control)，是基于角色的访问控制，是一种安全策略，它通过在用户和权限之间引入角色概念，来实现对资源的访问控制。许可权通常由角色来赋予，即角色具有一组许可权，用户通过继承角色的许可权来获得对目标和操作的访问权限。RBAC1解决了这个问题，创建完经理角色并配置好权限后，主管角色的权限继承经理角色的权限，并且支持针对性删减主管权限。
2024-05-09 16:07:35
1346
原创 系统权限控制插件封装-实现系统权限控制插件化
静态路由通常是那些不需要权限即可访问的页面，如登录页、404页面等。动态路由则是根据用户角色和权限来动态生成的路由。3、路由匹配与生成调用后端接口获取侧边栏树形结构数据。前端通过递归遍历后端返回的树形结构数据，并与前端配置的路由进行匹配。
2024-05-09 15:58:59
1084
1
原创 Vue3自定义指令封装-按钮权限控制v-permission、hasPermissions
背景：平常所接触到的系统权限控制，大部分都是菜单、路由级别的控制，但后台管理系统中，很多操作都是与职责和角色挂钩的，同样一个列表，不同人的操作列并不都一样，有些页面存在一些含有重要数据的组件，也会进行相应的权限控制，仅让领导层能看到。：根据用户的权限不同，对不同的按钮进行权限控制，对同一组数据，不同的用户是否可以增删改查。对某些用户来说是只读浏览数据，对某些用户来说是可编辑的数据。除了按钮，比如页面中的某个字段，某个div，某个组件要求根据当前用户的权限进行控制时，都可以称为按钮级权限。
2024-05-09 14:11:12
4462
2
原创 修改el-table中某一行样式，解决修改样式无效的问题
列表展示项目信息，其中，根据后端接口字段返回的项目状态task_status，延期项目底色换成浅黄色，预警项目底色换成粉红色。① 在公共样式文件里面写好样式②在js文件里面写个样式对应的map③在vue文件中导入公共样式文件和js文件④在el-table中动态绑定row-class-name⑤在methods中写动态获取样式名的方法。
2024-04-22 14:35:35
1164
4
原创 element的el-table表格自定义表头解决数据不更新问题
element 官网上el-table上使用插槽 slot=“header”来实现自定义表头，在需要动态更新表头数据时，出现无法实时更新的情况，只需要将slot=“header” 改成#header ，效果就正常了。通过插槽传入表头，但是，如果我把表头初始值赋值为null，虽然可以正常显示表头，但是一开始会报错；如果我把表头初始值给列出来设计好的字段=""，那么获取到后端返回的数据后，表头并不会自动更新！需要生成一个表格，表头由后端返回，自定义生成。
2024-04-11 16:01:25
1602
1
原创 TypeScript 学习笔记
概述TypeScript可以看成是JavaScript的超集，主要提供了类型系统和对ES6的支持所有JavaScript脚本都可以当作TypeScript脚本(但是可能会报错)，此外它再增加了一些自己的语法。类型类型指一组具有相同特征的值。如果两个值具有某种共同的特征，就可以说它们属于同一种类型。一旦确定某个值的类型，就意味着这个值具有该类型的所有特征，可以进行该类型的所有运算。凡是适用该类型的地方，都可以使用这个值；凡是不适用该类型的地方，使用这个值都会报错。TypeScript 是在开发阶段报错。
2024-04-08 09:59:59
803
1
原创 Vue组件封装重要知识点
通常,父组件通过props向下传递数据给子组件，而子组件则通过事件$emit向上发送消息给父组件.有时，我们可能希望子组件能直接修改某些由父组件传递下来的props，而不需要显式地触发一个事件来通知父组件更新这些值。场景：当前，有一个多处使用的弹窗，里面的左半部分是动态变化的，右半部分是统一的，我们需要动态配置左边，所以可以把左边区域的整块内容挖空，在使用到dialog的地方通过插槽去配置。父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时，会通过$emit事件告诉父组件。
2024-04-01 15:10:11
1691
1
原创 Vue3学习笔记
2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）2 年多开发, 100+位贡献者, 2600+次提交, 600+次 PR、30+个RFCVue3 支持 vue2 的大多数特性可以更好的支持 Typescripthook本质是一个函数，使用 Vue3 的组合 API 封装的可复用的功能函数。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
2024-03-23 10:06:13
893
空空如也
Python分析股票指标的准确率
2021-06-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人