- 博客(61)
- 资源 (3)
- 问答 (4)
- 收藏
- 关注
RSS订阅原创 优化Webpack打包流程：打包完成后再删除旧文件，确保网站访问稳定
假设webpack打包耗时三分钟，在这三分钟内，网站都是无法访问的。生产环境下，影响太大。在生产环境下，为了确保网站的稳定性和一致性，通常建议在打包完成后再部署新的打包文件，以确保网站始终可访问。因此，想到一个手动操作文件系统的方案: 将项目打包到临时文件夹下，完毕后，删除原dist文件夹，再将临时文件夹重命名为dist。
2023-07-03 14:54:28
2531
原创 [BUG记录] Element Plus 的 Backtop 组件未生效
vue项目，页面使用了 Element Plus 的 Scrollbar 组件包裹。在页面内引入 Backtop 组件，未随着页面滚动生效
2023-06-14 16:35:16
1537
1
原创 axios封装，包括基本封装以及若干非必要封装（自定义方法、监听上传/下载进度、中断请求、接口loading）
axios 是前端开发的基本工具之一，它的封装早就不新鲜了本文分为两部分：一是 axios 基本封装示例；二是非必要封装，列举个人开发中遇到的一些较为实用的封装需求。
2023-05-29 17:10:16
1868
1
原创 分享：前端开发使用的各类 AI Copilot 辅助开发
现在谁还没听过 ChatGPT，通没通网我不确定，但一定不是搞开发的网上各种教注册OpenAI账号的、卖key的，然后就可以去各类基于ChatGPT api的插件、应用使用。但是这类都属于不合规的方式，这里不推荐虽然因为种种原因，无法直接使用。但现如今，已经有的很多合规方式可以让我们稳定使用了。
2023-04-15 00:35:41
8813
原创 对比 vue2 vue3 中响应式地获取 vuex 状态
store中的状态是响应式的，在组件中调用 store 中的状态仅需要在计算属性中返回即可。
2023-04-07 11:35:30
555
原创 Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结
[email protected] 后提供的虚拟化表格组件，解决表格数据过大导致的卡顿等性能问题。相对于表格组件，用法上区别还是挺大的，尤其是一些附加的功能，例如排序、筛选、自定义单元格/表头渲染等等。本文参照官网文档、示例，结合个人使用总结，演示虚拟化表格的基本使用，记录上述附加功能的基本实现。除组件的相关接口需要按照官网规范使用外，示例中的其它具体实现的方法仅作参考。
2023-03-13 14:33:00
15176
14
原创 实现 element-plus 表格多选时按 shift 进行连选的功能
element-plus表格提供了多选功能，可单击勾选一条数据，可全选。现在有个很合理的需求，希望实现类似于文件系统中shift连续选择功能，并且在表格排序后，依照排序后的顺序连选。
2023-02-14 22:34:42
2162
原创 Element Plus 跟踪表格数据总数，包括查询、筛选等操作
Element Plus表格，在筛选等更改表格数据条数的操作下，如何实时跟踪计算它。本文探索了两种方案
2023-01-19 15:40:13
3066
原创 [BUG记录] element-ui / element-plus 的 Select 可搜索组件在 iOS 下无法唤起软键盘
element-plus 的 Select 组件可以通过 filterable 属性开启搜索功能，该组件在iOS系统中，点击组件输入框，无法唤起软键盘。vue3.x下的解决方案略有不同
2022-12-30 16:56:18
1755
原创 [BUG记录] vue3 setup provide/inject：无法正常进行依赖注入
以服务的方式来调用element-plus loading，导致依赖注入失效：祖先组件部分属性无法provide，后代组件无法inject祖先组件provide的值。
2022-08-18 14:54:08
5265
原创 js 构造函数 return 非空对象，其实例化的对象在原型上的差异
ECMAScript 中的构造函数是用于创建特定类型对象的。构造函数也是函数，只是使用new操作符调用构造函数会执行如下操作：(1) 在内存中创建一个新对象(2) 这个新对象内部的 特性被赋值为构造函数的 属性(3) 构造函数内部的 被赋值为这个新对象（即 this 指向新对象）(4) 执行构造函数内部的代码（给新对象添加属性）(5) 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象......
2022-07-29 17:17:25
335
原创 上手 vue3 组合式API (Composition API) --- 语法要点总结
本文以 `` 为示例，总结个人学习使用 Composition API 的一些常见语法要点
2022-07-01 16:56:53
704
原创 基于 vue3 & element-plus 的暗黑模式
[email protected] 已经开始支持暗黑模式了。通过在 html 标签上添加一个名为 dark 的类来启用为了方便切换，可使用 useDark | VueUse。示例：以下，基于 element-plus switch组件 创建了一个暗黑模式开关组件，将它放入菜单栏，就可以方便地切换模式了..................
2022-06-29 15:20:03
11137
原创 Element [email protected]更新至@2.x的一些破坏性改动
Element Plus官方迁移指南中间版本的更新策略：element-plus 代码仓库，discussion 中查询"Breaking Change"，可以查看迁移必备的更改，例如：Breaking changes made in 1.1.0-beta.11.2.0-beta.1 Breaking Change1.3.0-beta.1 Breaking ChangeElement Plus Breaking Changes其它非破坏性改动，可参照更新日志或者官方文档......
2022-06-20 11:48:11
2383
2
转载 JS原生滚动到指定元素
Element.scrollTo()、Element.scrollIntoView()、Element.focus()
2022-05-04 18:15:32
17592
原创 网页性能优化——图片，使用多种图片处理策略提升性能，包括压缩、云存储、预加载、懒加载、渐进式图片
前言网站如果包含很多图片等静态资源文件，那打包后的文件会非常大。不做处理会导致非常糟糕的浏览体验一、图片处理1、压缩首先就是压缩静态资源的大小。相机照片一张就能轻松破10M，微信、钉钉等都会自动压缩图片视频。放一个简单好用的在线图片压缩链接 squoosh图片过多时，效果受限，无法从根本上解决2、云存储将图片等资源存储在云上，使用外链方式引入需先下载后加载，下载速度不能保证，体验可能仍然很糟糕二、图片预加载图片预加载就是在当前页面加载完毕后，预先加载其它页面所需的图片，这样，切换到该页
2022-04-14 12:36:01
3415
原创 node-sass安装失败问题分析及解决方案
项目场景：一个使用node-sass的vue项目，从远程代码库拉到本地问题描述无法正常安装项目依赖error D:\My prgram\demo-proj\node_modules\node-sass: Command failed.Exit code: 1Command: node scripts/build.jsArguments:Directory: D:\My prgram\demo-proj\node_modules\node-sassOutput:Building: D:\
2022-03-14 12:31:44
3550
1
原创 async...await...异常捕捉封装
async…await…简化了Promise的写法，尤其是后者多次嵌套的情况下，代码可读性很差。但前者的异常捕获却没那么方便
2022-03-04 12:04:46
427
原创 vue相同的组件实例间跳转页面不刷新，即路径参数更改
使用带有参数的路由时需要注意的是，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用
2022-02-28 18:20:55
1546
原创 暗黑模式下图片处理
CodePen上发现的一行代码的方案 Dark mode image filter其实是通过使用 css filter 设置图片的亮度、饱和度：filter: brightness(0.8) saturate(1.25);
2022-02-07 09:55:53
1176
原创 vue i18n v9的迁移后的$t()无法获取数组、对象
项目场景：将老的vue2项目更新到vue3，vue-i8n也更新到v9版本以上后，发现改动还是挺大的具体迁移工作参考官网：vue-i18n: Migration from Vue 2问题描述：改动的细节很多，此文仅涉及 Translation API 的问题v9后，$t()将仅返回字符串，数组及对象会直接返回其属性名 原因分析：官方解释：“Reason: To make simple obligation to return the translation results, and i
2022-01-14 11:36:43
2172
原创 JS打印表格时边框缺失问题
问题描述：JS打印表格时边框缺失问题项目场景：window.print()打印网页，预览中，表格的边框缺失部分或全部原因分析：首先，怀疑是设置了border-collapse:collapse合并边框导致的问题不使用合并边框，手动设置td边框后发现问题还是存在然后，发现貌似是PDF预览的问题。下载PDF，打开，发现缩放都会让边框样式改变。转WORD或者直接打印机打印，证实边框样式并没有问题。。。解决方案：如果真的只是PDF预览问题，那无法解决。如果不是的话，可以参考这位老哥的方案：J
2021-12-30 17:26:19
4279
原创 v-viewer：vue3图片查看器
v-viewer：一个方便易用的vue3 图片查看器1、cdn引入：<link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet"><script src="//unpkg.com/viewerjs/dist/viewer.js"></script><script src="//unpkg.com/v-viewer@next/dist/index.umd.js"></scrip
2021-12-24 14:46:27
10916
19
原创 element-plus表单验证使用 个人总结
表单验证能通过设置验证规则验证用户的输入，并对不规范的输入做出对应提示。element-plus（包括element-ui）都提供了表单验证功能。但官网上只有最基本的使用方法，详细使用需要参考async-validator，element-plus表单验证就是通过它实现的..............................
2021-10-18 12:22:19
41131
7
原创 js获取随机数
根据需要生成自己的随机数，一般用简单的随机数就可以了随机数Math.random(0,1).toString().substring(2)时间戳Date.now()时间戳+随机数Date.now() + +Math.random(0,1).toFixed(3)UUIDJS生成uuid的四种方法...
2021-09-14 19:01:59
667
原创 vue组件中监听键盘/按键事件
问题描述：组件监听键盘escape事件，vue提供的按键修饰器无法监听到组件整体上解决方案：将监听事件绑定在document上，销毁组件时，再移除该事件created() { document.addEventListener('keyup', this.escEvent)},methods: { escEvent(){ if(window?.event?.keyCode == 27) this.closeComp() }, closeComp() { // ... }}
2021-09-06 17:38:16
3228
原创 vue3使用Font-Awesome
如题，vue3使用font-awesome5有些需要注意的地方一、安装官方提供了很多安装使用方式，这里仅展示一种Git地址：vue-fontawesome1、npm安装Install the core package and icon content.安装核心包和图标npm i --save @fortawesome/fontawesome-svg-corenpm i --save @fortawesome/free-solid-svg-iconsInstall this Vu.
2021-05-18 10:32:59
10023
1
转载 css媒体查询总结
一、定义及基本用法CSS3 @media 查询1、定义使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。2、语法mediatype：媒体类型and|not|only：运算符(media feature)：媒体功能@media mediatype and|not|only (medi
2021-05-14 15:41:14
571
原创 js实现一个回调，在页面内所有图片及后续动态插入的图片加载完成后（onload）执行
需求描述架构：原生js及jQuery需求：需要根据网页DOM及资源都加载后的布局（高度等）来调整页面方案：监听图片的load事件，都加载完毕后，执行后续js逻辑考虑到动态添加的dom中也可能存在图片，对这些图片也需要监听load事件1 load事件绑定问题1.1 在img标签中定义onload事件...<img src="img/img_1_1.png" onload="testLoad()"/>...<script>testLoad = () => {
2021-04-23 19:05:14
1651
原创 js入口函数
原生js// 不仅文本加载完毕，而且图片也要加载完毕，再执行函数。window.onload = function () { console.log(1);}jQuery// 1.文档加载完毕，图片不加载的时候就可以执行这个函数。$(document).ready(function () { console.log(1);})$(function () { console.log(1);});// 2.文档加载完毕，图片加载完毕的时候再执行这个函数。$(window).read
2021-04-23 14:46:43
1613
原创 JavaScript的console用法
console常用的四个输出方法：console.log：输出普通信息console.info：输出提示性信息console.error：输出错误信息console.warn：输出警示信息上面4种方法，都可以使用printf风格的占位符。支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。其他方法其它方法参考下列文章：Console MDNconsole.log 用法(调试用)...
2021-04-23 14:39:26
139
原创 win10安装virtualenv、virtualenvwrapper踩坑记录
项目场景：win10 python3.6下安装virtualenv、virtualenvwrapper。参照网上安装教程使用pip依次安装，然后配置环境变量WORKON_HOME问题描述：pip安装过程中出现权限问题，提示在命令后加上 --user ，可以以管理员身份运行cmd安装后，相关命令报错 “‘mkvirtualenv’不是内部或外部命令，也不是可运行的程序或批处理文件”接着百度，解决办法基本一致，有这么几个说法：要安装virtualenvwrapper-winpytho
2021-03-30 11:28:28
738
原创 从零记录腾讯云建站全过程
文章目录一、准备1.云服务器2.登录3.创建密钥4.绑定密钥5.开机、登录二、nginx安装1.查看操作系统2.gcc安装3.PCRE pcre-devel 安装4.zlib 安装5.OpenSSL 安装6.nginx三、维护四、网站1.nginx主页2.域名解析3.网站备案总结一、准备1.云服务器腾讯云新注册且实名认证用户可以免费使用一些产品一段时间，包括半个月的云服务器，以此为示例建站。2.登录3.创建密钥将下载的密钥保存好，登录要用。也可以通过用户名密码的方式登录4.绑定密钥
2021-03-16 15:43:48
838
原创 实践：前后端分离实现JWT登录验证，包括前、后端配置
文章目录前言一、jwt后端配置1.导入依赖2.jwt方法类3.token生成4.jwt拦截器5.jwt拦截器配置二、jwt前端配置1.获取token2.封装axios三、踩坑记录1.静态资源被拦截（一、5）2./error被拦截（一、5）3.yml项目路径（一、5）前言通过jwt实现单点登录jwt是什么？原理是什么？诸如此类的问题这里不提，本文仅记录实现过程及踩的坑一、jwt后端配置1.导入依赖 <dependency> <groupI
2021-03-15 18:28:33
4981
4
原创 BUG记录：SpringBoot项目配置拦截器，部署后出现无法调用接口的问题
项目场景：SpringBoot项目配置拦截器，实现jwt验证问题描述：配置拦截器后，本地调试正常，发布到服务器后，日志如下：2021-03-13 02:41:08.400 WARN 10706 --- [io-13145-exec-2] o.s.web.servlet.PageNotFound : No mapping for GET /static/%255c%255c..%255c/..%255c/..%255c/..%255c/..%255c/..%255c/..%2
2021-03-15 17:04:09
939
1
VueEleTable.vue
2020-03-12
Mybatis-Plus的插入数据返回主键值
2020-09-15
百度地图底图上的默认标注点在移动H5页上如何设置点击事件
2019-12-20
H5百度地图获取当前定位只能定到城市吗？
2019-10-18
H5页面如何添加预设样式？
2019-08-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人