- 博客(140)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 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
415
原创 使用MicroApp重构旧项目
随着技术的飞速发展，我们公司内部一个基于“上古神器” jQuery + PHP 构建的十年历史老项目已显力不从心，技术非常老旧且维护成本高昂，其实已经无数次想要重构，但是苦于历史遗留原因以及业务的稳定性而一直难以下手，而且一时半会又不能全部重构。本次新页面较多且后续将持续迭代新模块，而老页面的改动较少且代码库错综复杂，牵一发而动全身。经过几番思考，我们发现。
2024-08-15 17:32:04
968
原创 微前端插件 v-micro-app-plugin
v-micro-app-plugin 是一款基于京东MicroApp框架的微前端插件，旨在帮助开发者快速地将微应用集成到不同的系统中，实现高效、灵活的前端模块化开发。以下是详细的使用指南，帮助你快速上手。
2024-08-15 17:31:52
863
原创 【踩坑】TypeScript 中使用 sass 动态设置样式
在从 Vue2 项目转向 Vue3 项目时，不得不将已经封装好的 echarts 图表也升级成 Vue3 适配的版本，遇到了一个有些诡异的问题，在此记录一下。
2024-08-08 19:22:33
463
原创 .gitignore 忽略文件不生效如何处理？
近期因为写了一个自动打包发布脚本，需要再项目中增加一个 uses.ts 文件，里面记录了用户名、密码、服务器地址、文件夹等等信息，虽然确实是方便了很多，但是跑完流程后，发现这样会有安全问题，太多关键信息上传到代码库上去了，于是我赶紧。
2024-08-08 09:55:45
656
原创 使用Gitlab实现monorepo多项目CICD
CI/CD（Continuous Intergration/Continuous Delpoy），即持续集成/持续部署，或称为持续集成/持续交付，作为一套面向开发和运维团队的解决方案，CI/CD 主要解决集成新代码和向用户频繁交付应用的问题。更直接地说，就是可以解放开发人员的双手，将时间和精力专注于代码本身。传统的前端部署往往都要经历：本地代码更新本地打包项目清空服务器相应目录上传项目包至相应目录几个阶段，这些都是机械重复的步骤，并且手动操作非常容易出错。对于这一过程，我们往往可以通过CI/CD。
2024-08-08 09:06:57
823
原创 ts-node报错ERR_UNKNOWN_FILE_EXTENSION
package.json 中的 "type": "module", 依然保留，然后进行以下操作进行解决。删掉，那么就跑不动，也 build 不了，但是能 deploy 成功。在网上寻找了很多很多很多种解决方案，最终发现， 只要在。，那么就可以跑也可以 build，但是却无法 deploy。但是呢，新的问题出现了，项目跑不动了呀！删除后，项目它就跑不动了！删除，问题就解决了。
2024-08-06 20:46:17
408
原创 前端渲染模式
在Web开发中，渲染（Rendering）是一个核心概念，指的是将应用程序的数据（data）与模板（template）结合，生成最终的HTML页面，这个页面随后会被浏览器解析并展示给用户。这个过程是动态Web应用的核心，因为它允许开发者根据不同的数据动态地生成页面内容，而不是每次更改都需要手动编写静态的HTML文件。 我们可以简单地把渲染理解为：渲染就是将页面数据和页面模版组装成html的过程
2024-07-27 19:25:58
1039
原创 从0到1搭建一个组件库
最近我开启了一个新项目，基于echarts进行二次封装，希望能为Vue3项目量身打造一套高效、易用的图表组件库，取名为 v-echarts。目前雏形已经搭建完成，先把整个搭建过程做一个记录。后续再持续迭代、完善该图表组件库。笔者在搭建自己的组件库时，趁着项目当前足够空白，专门切出了一个 demo 分支，存下来当做模板以备不时之需。可以切换到 demo 分支，查看比较干净的项目代码。
2024-07-25 16:36:39
871
1
原创 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
1191
原创 transition 过渡动画出现抖动的问题
最近在系统右下角加了一个智能客服的图标，用于接入gpt。理想的效果是：原先显示30px的小图标，当鼠标悬浮时，图标就向左上方移动并且变大到1.5倍。然鹅，效果并不稳定，有些时候会疯狂抖动，体验感不好。
2024-07-19 14:49:39
421
原创 微前端解决方案
优点：CSS和JavaScript天然隔离，避免了样式冲突和脚本污染，拥有对应的用于单独部署子应用组件的域名多个子应用可以并存，支持并行开发和独立部署代码的可读性变得非常清晰，组件资源内部高内聚，组件资源由自身加载控制原生浏览器支持，不依赖于特定的框架或库缺点：浏览器和框架的支持不够：浏览器实现不一致，存在向后不兼容的版本问题，需要额外的polyfills支持开发成本较高：需要重写现有的前端应用，在整个前端应用上把它们全部转换成Web Components。
2024-07-13 18:54:46
930
原创 微前端基础知识
微前端借鉴了微服务的架构理念，它既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活，有一个基座应用（主应用），来管理各个子应用的加载和卸载，所以微前端不是指具体的库，不是指具体的框架，不是指具体的工具，而是一种理想与架构模式，微前端的核心三大原则：独立运行、独立部署、独立开发。
2024-07-13 18:48:27
1130
原创 Vue中的Mixins与钩子函数：理解合并与调用
首先，让我们简要回顾一下mixins的概念。在Vue.js的架构中，mixins是一种允许开发者跨多个组件共享代码片段的机制。通过将可复用的功能封装在mixin对象中，我们可以轻松地在多个组件中引入这些功能，而无需重复编写相同的代码。当组件使用mixins时，所有mixins对象的选项将被“混入”该组件本身的选项中。
2024-07-12 16:57:59
632
原创 使用patch-package自动修改node_modules中的内容/打补丁
在使用VuePress搭建个人博客的过程中，我需要使用到一个用来复制代码块的插件uepress-plugin-nuggets-style-copy。问题：插件可以正常安装，但是启动会报错。通过查看错误信息，定位是插件中的copy.vue文件出现错误，在网上查找方法，发现是通过打补丁修改插件源码的方式来解决报错的问题。
2024-07-02 14:27:56
818
原创 Vue页面内容未保存时离开页面做弹框提示
一、背景一、背景目标：如果当前页面中有正在编辑中的内容，那么此时切换组件、跳转路由、关闭标签页、刷新页面，都会有离开确认提示，防止用户因误触导致填写的内容白费。后台管理系统中有许多需要填写的表单，弹窗方式的表单一般都会关掉或提交，而单页个面的表单，有时候会忘记暂存或提交，直接离开页面，导致千辛万苦填写的内容全部置空，这是非常不友好的！！！于是，需要实现一个功能：如果当前页面中存在编辑中的内容，那么离开页面之前，要弹窗提示用户是否确认离开。二、实现。
2024-06-14 14:10:23
873
1
原创 React学习笔记
React 的三大特性：数据驱动 -> 单向数据流在React中，一切皆数据。要想改变界面元素或更改DOM节点，只需修改数据即可。但不要轻易操作DOM节点。所有的数据都用state来管理，分为组件state和全局state。数据只能从State流向DOM，不能逆向更改。函数式编程(声明式编程) = 组件化 + JSX纯函数：函数的输出不受外部环境影响，同时也不影响外部环境。非纯函数：输入相同，输出不同的函数。函数的柯里化：将一个低阶函数转换为高阶函数的过程。
2024-05-31 16:14:57
657
原创 系统权限控制基础知识
当需要调整用户的权限时，管理员只需修改用户的角色分配，而无需逐个修改用户的许可权，从而大大简化了权限管理过程。RBAC(Role-BasedAccess Control)，是基于角色的访问控制，是一种安全策略，它通过在用户和权限之间引入角色概念，来实现对资源的访问控制。许可权通常由角色来赋予，即角色具有一组许可权，用户通过继承角色的许可权来获得对目标和操作的访问权限。RBAC1解决了这个问题，创建完经理角色并配置好权限后，主管角色的权限继承经理角色的权限，并且支持针对性删减主管权限。
2024-05-09 16:07:35
1071
原创 系统权限控制插件封装-实现系统权限控制插件化
静态路由通常是那些不需要权限即可访问的页面，如登录页、404页面等。动态路由则是根据用户角色和权限来动态生成的路由。3、路由匹配与生成调用后端接口获取侧边栏树形结构数据。前端通过递归遍历后端返回的树形结构数据，并与前端配置的路由进行匹配。
2024-05-09 15:58:59
936
1
原创 Vue3自定义指令封装-按钮权限控制v-permission、hasPermissions
背景：平常所接触到的系统权限控制，大部分都是菜单、路由级别的控制，但后台管理系统中，很多操作都是与职责和角色挂钩的，同样一个列表，不同人的操作列并不都一样，有些页面存在一些含有重要数据的组件，也会进行相应的权限控制，仅让领导层能看到。：根据用户的权限不同，对不同的按钮进行权限控制，对同一组数据，不同的用户是否可以增删改查。对某些用户来说是只读浏览数据，对某些用户来说是可编辑的数据。除了按钮，比如页面中的某个字段，某个div，某个组件要求根据当前用户的权限进行控制时，都可以称为按钮级权限。
2024-05-09 14:11:12
2458
原创 修改el-table中某一行样式，解决修改样式无效的问题
列表展示项目信息，其中，根据后端接口字段返回的项目状态task_status，延期项目底色换成浅黄色，预警项目底色换成粉红色。① 在公共样式文件里面写好样式②在js文件里面写个样式对应的map③在vue文件中导入公共样式文件和js文件④在el-table中动态绑定row-class-name⑤在methods中写动态获取样式名的方法。
2024-04-22 14:35:35
631
4
原创 element的el-table表格自定义表头解决数据不更新问题
element 官网上el-table上使用插槽 slot=“header”来实现自定义表头，在需要动态更新表头数据时，出现无法实时更新的情况，只需要将slot=“header” 改成#header ，效果就正常了。通过插槽传入表头，但是，如果我把表头初始值赋值为null，虽然可以正常显示表头，但是一开始会报错；如果我把表头初始值给列出来设计好的字段=""，那么获取到后端返回的数据后，表头并不会自动更新！需要生成一个表格，表头由后端返回，自定义生成。
2024-04-11 16:01:25
1126
1
原创 TypeScript 学习笔记
概述TypeScript可以看成是JavaScript的超集，主要提供了类型系统和对ES6的支持所有JavaScript脚本都可以当作TypeScript脚本(但是可能会报错)，此外它再增加了一些自己的语法。类型类型指一组具有相同特征的值。如果两个值具有某种共同的特征，就可以说它们属于同一种类型。一旦确定某个值的类型，就意味着这个值具有该类型的所有特征，可以进行该类型的所有运算。凡是适用该类型的地方，都可以使用这个值；凡是不适用该类型的地方，使用这个值都会报错。TypeScript 是在开发阶段报错。
2024-04-08 09:59:59
573
1
原创 Vue组件封装重要知识点
通常,父组件通过props向下传递数据给子组件，而子组件则通过事件$emit向上发送消息给父组件.有时，我们可能希望子组件能直接修改某些由父组件传递下来的props，而不需要显式地触发一个事件来通知父组件更新这些值。场景：当前，有一个多处使用的弹窗，里面的左半部分是动态变化的，右半部分是统一的，我们需要动态配置左边，所以可以把左边区域的整块内容挖空，在使用到dialog的地方通过插槽去配置。父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时，会通过$emit事件告诉父组件。
2024-04-01 15:10:11
1317
原创 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
778
原创 踩坑：npm run build会打包本地未提交的代码
如果你修改了代码，但没有提交这些修改到版本控制系统(如Git)，那么当你运行npm run build进行打包时，这些未提交的修改。如果不希望未提交的代码被打包，那么应该在执行打包操作之前，将未提交的代码进行提交，或者将它们从项目中移除。即使你没有提交代码，npm run build命令仍然会打包你工作目录中的所有文件，包括未提交的修改。在本地执行npm run build时，会打包当前项目目录下的所有代码，包括已提交和未提交的代码。第一次知道原来打包是会把本地所有代码一起打包的，不管有没有提交。
2024-03-16 15:29:00
708
原创 Vue组件封装方案对比——v-if方式与内置component方式
先单独封装好各种类型的表单控件小组件，再通过来动态渲染，保证高度的组件复用性和扩展性，并避开v-if判断；对配置的数据结构进行调整使其更扁平化，降低使用门槛并提高开发效率。 高复用性：通过单独封装各种类型的表单控件小组件，实现了高度的组件复用 灵活性：通过封装各种表单控件小组件，可以确保每个组件都具备较高的可重用性和可扩展性。同时，使用可以根据配置动态渲染不同的组件，提供了更大的灵活性 易于维护：每一种特定的表单控件都有独立
2024-03-16 14:38:13
1359
原创 git push解决办法：! [remote rejected] prod -＞ prod (pre-receive hook declined)
今天想把最近改的东西上传到Gogs上发版一下子的，但是发现有冲突合并不了，于是我切回自己的分支合并了prod，把冲突处理了一下子，还又增加了一点修改，push后.......又回到prod进行git push，哦豁~这就出了问题了。可以看到，git push不上去的原因是：所push的分支prod是受保护的，为protected。
2024-03-12 14:38:45
1399
原创 踩坑：直接npm run upload导致test代码上传到prod上
今天正式服突然出了问题，F12打开一看，是有些打包的资源404了，于是来到项目中的dist一看，报错的那些文件，都存在，想着打包好的dist已经有了，那就直接upload上传......结果是！它可以把打包和上传流程连在一起，并且通过代码控制test分支的代码只能上传test，而prod分支的代码只能上传prod，避免了人为误操作，把别的分支的代码覆盖到prod上去。原因是这样的：昨天我发版了测试服，因此，当前本地打包的代码是test分支的，我直接上传，就把test的代码都给发到prod上去了。
2024-03-08 11:05:19
223
原创 Git误操作补救错失：恢复误删的本地分支、将某个提交从一个分支复制到另一个分支
作为一枚强迫症，没用的分支总是喜欢及时删删删删掉删掉统统删掉，结果今天发现有些分支还是应该保留。比如，①前段时间切了个分支用来专门做图表，但因为需求还没有最终确定，已经上线了测试服而没有上正式服。②现在需要对那部分图表进行改动，就发现本地除了测试分支外，其它分支都没有图表相关代码了。③如果从测试分支切一个出来修改，又会有新的问题：等到上线的时候，我这个分支需要合并到prod中，那就相当于将test分支的一些代码也给合并到prod了，那可真的是太太太太危险了！！！所以，只能是把之前的分支找回来。
2024-03-07 15:17:49
833
原创 JavaScript异步编程
回调地狱手写Promise细数异步场景与处理策略从Promise到tj/co从callback到promiseasync与await用法与原理详解详解Promise A+规范
2024-02-26 20:59:56
731
原创 JavaScript原型继承与面向对象编程思想
原型继承与面向对象编程思想JavaScript 原型与原型链JavaScript 原型实现继承(原型继承、构造函数继承、组合继承)JavaScript new创建对象原理详解在JavaScript中，原型(prototype)、构造函数(constructor)和实例对象(instance)是面向对象编程中的重要概念，并且它们之间存在着紧密的关系。原型链是由对象的原型构成的链状结构。当试图访问对象的属性或方法时，如果对象本身没有定义，JavaScript引擎就会沿着原型链向上查找，直到找到相应的属
2024-02-23 15:13:43
1144
原创 this、闭包与作用域
this、闭包与作用域this指针详解默认绑定、显式绑定、隐式绑定闭包的概念存储空间、执行上下文闭包的使用场景 闭包就是有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，并将函数返回。 执行上下文是JavaScript引擎在执行代码时创建的一个环境，它定义了变量和函数的可访问性。每当JavaScript引擎开始执行一段代码(全局代码、函数代码或eval代码)时，它都会创建一个新的执行上下文，并将其推入执行上下文栈。
2024-02-23 15:11:31
690
原创 Vue CLI学习笔记
Vue CLI是Vue.js的官方命令行工具，它是一个基于Vue.js进行快速开发的完整系统。通过Vue CLI，开发者可以快速搭建和开发Vue.js项目，提供了一整套完整的项目脚手架，包括项目初始化、开发服务器、构建工具等。是一个交互式的项目脚手架，通过简单的命令行界面，开发者可以快速创建一个新的Vue.js项目，并且会自动配置好项目的基本结构和依赖，让开发者可以直接开始编写代码。
2024-02-07 19:37:36
1207
原创 ES6学习笔记
ECMAScript 6 入门 - 《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版》 - 书栈网 · BookStackECMAScript 6 入门目录其他 《ECMAScript 6入门》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新增的语法特性。https://www.bookstack.cn/read/es6-3rd/sidebar.md Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从
2024-02-01 14:09:21
1175
原创 webpack面试题学习
说说你对webpack的理解？解决了什么问题？说说webpack的构建流程?说说webpack中常见的Loader？解决了什么问题？说说webpack中常见的Plugin？解决了什么问题？说说Loader和Plugin的区别？编写Loader，Plugin的思路？说说webpack的热更新是如何做到的？原理是什么？说说webpack proxy工作原理？为什么能解决跨域?说说如何借助webpack来优化前端性能？如何提高webpack的构建速度？与webpack类似的工具还有哪些？区别？
2024-01-18 11:34:42
493
1
空空如也
Python分析股票指标的准确率
2021-06-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人