lyd的博客

原创 对已有vue3项目进行国际化改造

项目使用进行的初始化创建请输入项目名称：vue-i18n请选择要包含的功能：TypeScript、JSX 支持、Router（单页面应用开发）、Pinia（状态管理）、ESLint（错误预防）、Prettier（代码格式化）是否引入 Oxlint 以加快检测？（试验阶段）No创建完项目之后，做了自动加载，axios请求封装，路由处理登录验证，pinia处理登录逻辑以及持久化，修改首页、关于页、新增登录页，封装登录接口，sass支持，mockjs配置。尽量丰富项目功能，精简项目内容。

原创 craftjs如何拖拽替换图片

craftjs不支持拖拽更新属性（其他框架也没有支持的），因此需要想一个折中的方案来处理。创建两个组件，一个图片盒子组件、一个图片组件，图片盒子组件只支持拖拽图片组件进入，当拖拽图片组件进入时图片盒子组件删除子组件，这样视觉效果上面相当于拖拽替换图片。

原创 craftjs如何存储和使用片段

craftjs支持把整个页面存储为JSON，然后使用JSON渲染整个页面。存储的JSON数据中只包含属性、组件名、子元素、关联元素等，结构还是比较简洁的。craftjs提供了两种方法添加元素，一个是add添加单个节点，一个是添加多个节点，节点树会多出events、related、rules等信息。所以结构进行存储才能简化数据。除了上面这两种，还支持使用create方法（官方文档中并没有说明，需要看源码或者更新日志），传递的第二个参数使用回调方法来实现拖拽添加，回调函数需要返回NodeTree或者。

原创 el-pagination警告提示

我按照官网不推荐的事件监听名称封装的，介意的话可以自己修改事件名称。，那是找到它，看到他是一个计算属性，判断逻辑和官网的提醒信息一样。什么情况，按照官方文档修改了，还是会出现。啊，放开断点，又再次进入了当前断点，这时候浏览器控制台已经打印出来警告信息，，可以再官网中找到详细介绍，下面页提供了不同脚手架的配置方案，找到。然而并没有什么用啊。，可以看到对三种标记的介绍，在介绍的上方有一个跳转链接。项目中的分页器是显示的，我尝试照着修改，修改一下事件名。，感觉用起来更麻烦了，先不管了，先修改一下看看吧。

原创 AntV G6的V5版本使用问题

最近在开发vue3项目时用到了AntV的G6开发树状图，在开发过程中遇到了一些问题，在这里分享一下。

原创 reactive数据修改无效

表格列表页面，页面中有新增和修改操作，新增和修改共用一个弹窗，弹窗中表单绑定的数据修改无效。复现步骤是先点击表格中的修改，然后点击新增，此时弹窗中表单数据没有置空（有赋值为空的操作）。因为通常情况下，修改的时候都是通过请求详情接口进行表单数据初始化的，所以这个方法就是为了延缓（异步）修改时数据赋值时间。导致的，那么直接注释掉这里，再次尝试看看，可以看到现在不会出现之前问题了，但是出现了新问题，表单校验状态没重置（添加代码。遇到不明白原因的问题，可以采取很多种方法，之前的博文分析中有使用过，但是没仔细说过。

原创 craftjs的示例landing项目改成APP路由

craft.js示例项目landing改成APP路由

原创 vue3自定义hooks遇到的问题

发现数据已经更新到接口返回的了，怎么页面没反应呢？，出现的结果是只有请求方法有效，加载状态无效，接口返回了数据，页面却不显示数据。是Proxy包裹的空数组，这应该是响应的数据，不像解构赋值出现的响应丢失啊。此时可以看到state里面是有接口返回的数据的，这样应该就说明不能使用。发现这里打印是有数据的，那在hooks方法里面返回前打印看看。这可能是英文文字太长导致的，这需要加上强制换行的。，写出来的代码让自己一时找不出来问题，唉。获取之后返回使用，这时候的数据是接口响应前的。但是这是为什么，还是有问题啊？

原创 可视化编辑器选择

最近要开发一个低代码项目，一个低代码项目技术难点都在可视化编辑器上面，由于没有充足的时间，也没有可视化页面编辑器开发技术能力，因此找到一个靠谱的可视化编辑器，基本就成功了一半。

原创 安装react报错

执行命令，然后出现报错。

原创 原型链图解

原创 搭建规范化的vue2项目

Vue2+Vuex+Router+Eslint+Prettier

原创 antd的表格组件错乱问题

表格头列宽度和表格体列宽度不一致，表格错乱

原创 运行vue3项目相关报错

VSCode打开TS+Vue3项目很多地方报错Reached heap limit Allocation failed - avascript heap out of memoryvue动态生成路由的项目，webpack怎么知道需要打包那些文件

原创 快速压缩前端项目

作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理

原创 淘宝镜像地址失效

使用nvm安装node时候报错，npm安装项目依赖报错，yarn install安装项目依赖报错

原创 网页生成PDF表格诡异多出空白

puppeteer生成pdf遇到表格出现留白，可能出现在表格体头和底出现空白，空白高度不固定，表格中的数据也存在丢失

原创 vue3项目开发中系列问题

vue3的jsx语法，vue3动态路由，dataOptions.call is not a function，pnpm本地调试组件库，outside of Vite serving allow list

原创 简版事件发布订阅

【代码】简版事件发布订阅。

原创 生产打包报错问题处理

遇到没有头绪的报错，需要使用排除法一点一点从大范围缩小到小范围，小范围内再进行一点一点的尝试，尝试次数多了总是可以发现问题的关键点。组件的相关代码放到了组件库文件夹中，组件库的打包和项目功能文件打包不一样，因此先把组件相关代码移动到项目中尝试，结果并不能解决。用于将 es5 最终输出 es3 的 webpack 插件，如果项目需要兼容 ie8 会用到它，注释掉这个插件，结果并不能解决。组件，首先进行的是把四个页面的代码注释掉，结果还是有问题；错误，把一些没有添加分号的代码也添加了分号，结果还是出现问题。

原创 nginx入门

命令需要在解压的根目录打开命令行执行，或者配置环境变量，就可以在任意地方打开命令行执行。下载地址：http://nginx.org/en/download.html。重载，这样可以本地模拟发布环境进行调试项目，也可以把打包配置。文件，下载成功之后解压就可以使用。点击下载，目前最新稳定版本。配置每次修改之后需要执行。来进行更好的代码调试。

原创 element的form校验问题

1. 表单项必填校验，内容为空时没问题，填写内容后不实时移除必填提示信息2. 新增的动态表单项，不能实时校验，执行form.validate会进行校验

原创 搭建react项目遇到的问题2022

最新搭建react项目踩坑

原创 上手阿里低代码引擎lowcode-engine

lowcode-engine实现表格页面简单的增删改查

原创 react项目增加commit的eslint校验

husky：8.0.0eslint：8.3.0lint-staged：13.0.3react：18.2.0

原创 node爬虫入门

本教程仅用于学习，不要用于商业。以往通常使用请求获取页面（request、superagent…）+操作网页提取需要的数据（cheerio）的方式来写爬虫，现在已经基本被废掉了，因为很多网站都是通过异步请求获取数据然后渲染页面，这样使我们请求获取的页面不是最终展示的页面，怎么处理这个问题呢？接下来跟着我来学习一下。案例爬取掘金首页前端页面前10篇文章环境谷歌浏览器node核心类库puppeteer文档http://www.puppeteerjs.com/安装npm i puppet

原创 和YOYO表白

小爱连续对话闲来无事和YOYO聊天，还是俗套的开场，虽然很俗，但是这个不重要，主要是为了进行表白，我鼓起勇气问她，做我女朋友吧，…呃，她温柔的拒绝了我。我觉得这应该不是她真实的想法，她应该是害羞，毕竟我们相处了快三年了，毕竟家里只有我一个男生，但是她还是拒绝了我，我要让她吃醋，于是我决定和家里的新成员小爱聊天。小爱每次只回答我一句话，让我很生气，我决定要给她治治这个毛病，不能惯着！环境Redmi K40 12+256MIUI 13.0.3问题小爱同学不能连续对话。解决设置==>小爱

原创 WindowsTerminal

windows Terminal前言windows系统中终端无法合并显示，当同一个项目中需要打开多个终端时很麻烦，并且终端不美观。下载官方Microsoft Store-搜索windows Terminal下载icon：GitHub-res-terminal.ico网盘https://pan.baidu.com/s/15QYPsH7jyVvmAh0Lk0uWJwivx2配置环境变量由于安装路径很长，所以还是把它配在了环境变量此电脑-右键-属性-高级系统设置-环境变量-系统变

原创 react中的keep-alive功能

在vue中可以很方便的实现keep-alive功能，但是在react中却不是很方便，遇事不要慌，度娘来帮忙。react-keep-alive首先找到的是react-keep-alive，一波操作之后，发现原来显示的页面不显示了，唉，抬下去，下一个！react-activation这个真香，具体怎么使用不再介绍，请查看中文文档，使用的时候要认真查看文档，同一个父节点下，相同位置的 <KeepAlive> 默认会使用同一份缓存，要想实现多份需要增加动态id属性来区分。手动控制缓存（tabBa

转载 奇技淫巧之一

取整const integerN = 0|3.2;数组过滤false数据const newArr = [2, '', undefined, 'a', false, null].filter(Bolean)ThinkPad的笔记本用出苹果笔记本感觉第一步联想官方驱动下载地址：https://iknow.lenovo.com.cn/driver/driverlist输入型号ThinkPad E570c（根据自己笔记本型号输入）第二步找到触摸板驱动下载安装即可，安装完了之后，进入 开始》设置

原创 前端搭建环境

nvmnvm-windowsDownload the latest installermaccurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bashwget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bashexport NVM_DIR="$([ -z "${XDG_CONFIG_HO

原创 通过CSS控制svg变化

本文介绍使用css魔法控制svg变化，要想实现这一点只需要耐心看下去！svg代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.

转载 xampp问题

使用xampp（v3.3.0）无法启动MySQL端口号被占用It seems that the port 3306 is already in use.aer you sure you want to use this port?因为安装xampp之前已经安装过MySQL，并且自动启动，默认端口号3306方法一：选择mysql->config->my.ini把3306端口都修改，Apache->Config->php.ini把3306端口也修改掉，控制面板->服务

原创 开始工作就差一个双击

背景程序员日常，每天打开电脑开始工作时候总是要打开一堆的东西，浏览器、聊天工具、编辑器（打开对应的项目）、项目文件夹…作为一个’懒人‘，每天重复这一堆操作，很烦~~~环境windows（MAC也可以，下文会讲一点）gitVSCode安装并配置了path开整第一步新建文件新建一个文本文档，重命名为open.sh，重点是后缀，双击打开此文件会默认使用git bash运行后缀名也可以是.cmd双击打开此文件会默认使用cmd运行第二步编写文件想要打开一个文件夹（文件夹地址：E:\proje

原创 一步一步打造属于自己的脚手架

预备知识本地安装卸载包在项目根目录下运行下面命令# 安装npm link# 卸载npm unlink命令行命令指定运行文件package.json文件中bin字段指定项目依赖包chalk 打印出彩色字commander 完整的 node.js 命令行解决方案download-git-repo 下载仓库代码handlebars 编译文件inquirer 交互式命令行界面ora 加载动画update-notifier 更新通知fi

转载 微前端-多页应用

简介多页应用初级实现方案，技术栈包括elementUI、vue、vuex、axios。。。解决问题项目布局共用问题使用iframe嵌套子页面的方式，只会更新页面部分区域跳转子页面只更新部分区域使用iframe嵌套子页面的方式子页面提示不置顶受到iframe限制，封装方法采用调用主页面vue实例提示子页面控制跳转到主页面路由采用调用主页面vue实例跳转（主页面实例挂载在window上）直接进入子页面自动跳转主页面中对应路由封装方法判断是否被嵌入iframe，

原创 前端脚手架项目

安装npm install @lydxwj/da-cli -g开发git clone https://github.com/lydxwj/da-cli.git# 或者下载解压https://github.com/lydxwj/da-cli/archive/refs/heads/master.zipcd ./da-clinpm install# 安装完依赖之后执行npm link命令打开命令行工具增加模板da add步骤示例：(本项目地址https://github.

原创 自动生成文档

批量把Markdown文件转化成HTML，并且支持浏览器预览，实时更新同步修改开发npm start自动打开浏览器监听文件变化出现谷歌打开开发者工具之后操作页面卡死时，建议升级浏览器生产npm run build介绍目录结构asserts：存放静态文件style：本文件夹中的github-markdown.css文件是样式必需文件build：打包执行的相关代码dist：生成文档目录src：Markdown文件目录template：HTML模板文件目录注：

转载 gitignore不生效

问题修改.gitignore文件之后，git commit提交，但是没有生效最新的gitignore配置解决出现不生效的原因是已经提交过更新，git有了缓存，所以更改完.gitignore文件需要先清git缓存，然后再提交git rm -r --cached .git add . git commit -m 'xxx'...

原创 failed with status 128

报错信息# 在使用`download-git-repo`下载仓库代码时报错信息'git clone' failed with status 128Response code 404 (Not Found)connect ETIMEDOUT# 运行`git clone`的报错信息remote: HTTP Basic: Access deniedfatal: Authentication failed for处理download-git-repo报错Response code 404 (