- 博客(97)
- 资源 (6)
- 问答 (3)
- 收藏
- 关注
原创 如何将几百兆的包优化到几十兆----记一次vue项目的打包优化过程
本次优化最终实现将项目包的大小由116MB降到了21.6MB,优化率达到了80%以上,可以说是一次非常成功的优化了,让一个大型项目能在只有5MB带宽的网络中能顺利使用起来。
2024-07-17 14:53:56 1275
原创 Ngnix 常用配置及和基本功能
Nginx 是一款高性能反向代理服务器,学习它非常有必要,本文讲解了 Nginx 核心配置,介绍了反向代理,负载均衡,动静分离三大功能,最后扩展了一些常用的指令。本文介绍了 Nginx 的基础用法,后续的 Nginx 内核以及原理部分有待研究。
2024-05-07 17:49:39 867
原创 js坐标转换
这是一个功能丰富的地理位置坐标转换工具集,它支持WGS-84、GCJ-02和BD-09等多种坐标系统之间的相互转换,同时提供了Web Mercator投影坐标与WGS-84坐标之间的转换功能。此外,该工具集还能精确计算地球上两点间的距离,并判断一个给定的点是否位于中国境内。
2022-07-14 09:07:29 584
原创 vite 初始化vue3项目Cannot find module ‘vue’. Did you mean to set the ’ moduleResolution’ option to ‘node’
Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
2024-07-16 14:24:51 238
原创 数据精度丢失
在开发过程中,发现从后台返回的数据结构中的id字段在前端显示为不正确的值。经过排查,怀疑是JavaScript中Number类型精度丢失的问题。通过将id字段的类型从Number改为String进行测试,确认了问题的根源。尝试在前端获取数据后立即转换为String类型,但发现数据在JavaScript中接收时精度已经丢失,因此最佳解决方案是让后端将id字段的类型改为String。
2024-07-16 12:17:50 402
原创 vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.
在使用Vue进行路由跳转时,若遇到“Avoided redundant navigation to current location”错误,这通常是因为尝试重复跳转到当前已经激活的路由。为解决这一问题,有两种主要方法。首先,可以考虑将vue-router版本升级到3.0,新版本可能已经修复了这个问题。其次,如果不想升级版本,也可以通过修改VueRouter原型对象上的push方法来避免这个错误。具体做法是在router文件中重写push方法,使其在执行时捕获并忽略这个错误,从而实现无缝的错误处理
2024-07-15 17:31:50 433
原创 log4js node日志插件
在Express后台项目的开发过程中,日志记录是一个重要的环节。起初,开发者可能考虑使用Node.js自带的console模块来实现日志输出,但往往发现其格式和功能无法满足实际需求。因此,经过搜索和比较,选择了log4js这一插件来实现更灵活的日志管理。
2024-07-15 17:25:32 346
原创 AI在编程领域的作用
AI(人工智能)在软件开发和许多其他领域都发挥着重要作用,但这并不意味着它在取代开发者。相反,AI更多地是在帮助开发者提高工作效率,解决复杂问题,并创造新的可能性。
2024-07-10 11:51:07 251
原创 2024前端面试题之Vue3
在面试前端工程师时,对于 Vue 3 的掌握程度是一个重要的考核点。本文将提供一系列针对这一级别工程师的 Vue 3 面试题,并附上详细的解析,帮助面试官全面评估候选人的技术实力和项目经验。
2024-07-10 11:35:09 989
原创 程序员35岁会失业吗?
相反,通过合理的职业规划和持续的学习努力,许多程序员不仅能够在这一年龄阶段保持竞争力,还可能迎来职业生涯的新高峰。因此,即使从纯技术的角度看,年轻程序员在某些方面可能更具优势,但经验丰富的程序员在团队中仍然具有不可替代的价值。首先,必须承认的是,技术领域的确在不断变化,新的编程语言、框架和工具层出不穷。只要能够保持持续学习的热情,不断提升自己的技能和能力,那么无论年龄如何增长,都能够在竞争激烈的市场中立足。这意味着,无论是传统的软件开发还是新兴的技术领域,如人工智能、大数据等,都将持续需要大量的技术人才。
2024-04-01 11:20:23 617
原创 TreeData 数据查找
最近做需求的时候遇到了这样的一个需求,Tree组件数据支持查找,而且TreeData的数据层级是无限级的开始想的事借助UI组件库(Ant-design-vue)中的Tree组件的相关方法直接实现,看了下api 发现没法实现,后来想通过手动构建节点树实现,这样就需要写递归组件,需要重新写编辑,删除逻辑(本人有点懒所以就没采取),最后还是在数据上动手。
2024-02-22 15:31:25 605
原创 函数柯里化和反柯里化
柯里化和反柯里化都是非常有用的编程技巧,让我们可以写出更加灵活通用的函数。理解这两种技术的实现原理可以帮助我们更好地运用它们。在编码中,我们可以根据需要决定是将普通函数柯里化,还是将柯里化函数反柯里化。合理运用这两种技术可以大大提高我们的编程效率。
2023-08-02 15:26:49 127
原创 Cannot read properties of null (reading ‘setTransform‘)
Cannot read properties of null (reading 'setTransform')
2023-04-23 11:56:33 876
原创 mapbox-gl.js:30 Error: Layer with id “test_map“ already exists on this map
mapbox-gl.js:30 Error: Layer with id "test_map" already exists on this map
2023-03-02 15:58:31 452
原创 js语法基础
##一、JavaScript基本介绍及发展趋势ES5是2019年发布,在所有现代浏览器中得到了相当完全的实现###二、编写JS及如何运行JS1.在HTML普通标签中直接写入JS代码写在标签上的 js 代码需要依靠事件(行为)来触发
2023-02-09 17:46:31 292
原创 VScode为Vue文件设置模板代码
VScode为Vue文件设置模板代码(1)\安装 Vetur 和 VueHelper 插件,安装完成后需要重启 VScode。(2)在扩展插件搜索框中找到如下 Vetur 和 VueHelper 两个插件,注意看图标,千万别安装错插件了(3)为 vue 添加模板代码片段。(4)选中 vue 项。(5)在打开的 vue.json 中加入你的模板代码片段。{ "vue": { "prefix": "vue", "body": [ " <!-- @description
2021-12-17 15:00:35 346
原创 BrowserRouter与HashRouter的区别
BrowserRouter与HashRouter的区别1.底层原理不一样:BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.path表现形式不一样BrowserRouter的路径中没有#,例如:localhost:3000/demo/testHashRouter的路径包含#,例如:localhost:3000/#/demo/test3.刷新后对路由state参数的影响1、Brows
2021-10-19 16:29:17 353
原创 antd按需引入与自定主题
antd的按需引入+自定主题1.安装依赖:yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json将原有启动命令改为下列形式```json "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build",
2021-10-19 16:27:42 146
原创 React 三种路由传参
React 三种路由传参1、params传参优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。// 路由页面:<Route path='/home/message/detail/:id/:title' component={Detail}/> //注意要配置 /:id//路由跳转并传递参数: //链接方式: <Link to={`/home/message/detail/${id}/${title}`}&
2021-10-19 14:19:11 233
原创 vue文件配置
vue-cli4 全面配置 细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。 不建议直接作为模板,希望能按照此教程按需配置,或者复制 vue.config.js 增删配置,并自行安装所需依赖。配置多环境变量 通过在 package.json 里的 scripts 配置项中添加–mode xxx 来选择不同环境 只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过 proces
2021-10-10 19:28:41 886
原创 前端代码规范
前端代码规范Front Standard Guide前端 JS 项目开发规范规范的目的是为了编写高质量的代码,让你的团队成员每天得心情都是愉悦的,大家在一起是快乐的。引自《阿里规约》的开头片段:现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果没有限速,没有红绿灯,谁还敢上路行驶。对软件来说,适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普
2021-09-23 16:28:35 182
原创 js中伪数组(类数组)
js中伪数组(类数组)伪数组js中伪数组(类数组)一、伪数组特性二、生成伪数组的方法三、将伪数组转为真正的数组一、伪数组特性具有length属性按索引方式存储数据不具有数组的方法, 比如push(),pop()等二、生成伪数组的方法在js中生成伪数组的方法比较多function的arguments对象document.getElementsByTagName和document.childNodes,返回NodeList对象的都是伪数组上传文件时选择的fi
2021-09-23 09:21:57 518
原创 2021最新前端面试题
面试题前言:最近需要给客户这边面试一个前端开发工程师,所以抽时间整理了一些面试题自我介绍介绍项目,针对项目提出几个问题在项目开发过程中遇到过什么难点,如何解决的?在项目中遇到bug如何解决?在设计中出现了一个很难实现的功能,可能需要三四天时间,但项目又是很急,你是如何解决的?平时自己有逛什么社区?html知识行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别?行内元素 span、b、em、strong、a、input、lab
2021-09-07 10:36:16 151
原创 js自动引入子文件的方法
一个自动引入子文件的方法先上图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R3Q4SQvN-1628132448628)(img.png)]//import persistence from "./modules/persistence";// https://webpack.js.org/guides/dependency-management/#requirecontextconst modulesFiles = require.context('./m
2021-08-05 11:01:43 262
原创 mac快捷键
mac快捷键Mac电脑一般都不怎么用鼠标,因此除了触摸屏的各种双指、三指甚至四指的操作之外,快捷键的使用可以带来非常大的便利,本文则主要收集整理了自己在Mac常规和Xcode开发过程中常用的一些快捷键。要使用键盘快捷键,请按住一个或多个修饰键,然后按快捷键的最后一个键。例如,要使用 Command-C(拷贝),请按住 Command 键并按 C 键,然后同时松开这两个键。Mac 菜单和键盘通常使用符号来表示某些按键,其中包括以下修饰键:Command(或 Cmd)⌘Shift ⇧Optio
2021-08-05 10:19:06 267
原创 mock模拟数据
mock模拟数据最近看了一个项目发现了里面mock用的非常不错,所以用此文章来记录一下1、书写模拟数据import Mock from 'mockjs'// 登录export function login () { return { // isOpen: false, url: '/sys/login', type: 'post', data: { 'msg': 'success', 'code': 0, 'expire
2021-06-23 15:57:36 566
原创 获取url参数
获取url后面参数方法现在前端开发大部分都会用到框架去开发很少用到这种方法。最近在用mock模拟数据时需要用到url后的参数,就写了这个方法。export const getParams = url => { const keyValueArr = url.split('?')[1].split('&') let paramObj = {} keyValueArr.forEach(item => { const keyValue = ite
2021-05-15 10:05:40 133
原创 SVG类库
几个基于svg的类库所有现代浏览器都支持SVG文件类型,它很快就成为网站设计人员的首选。您可以设计漂亮的图标作为支持向量机,并缩放到任何大小,而不损失质量。考虑到视网膜显示器的发展,这是SVG格式的最大优点之一。如果你想动画或操纵你的svg,这将需要更多的工作。但是,如果您愿意卷起袖子,亲自动手编写一些代码,这些免费库提供了最好的工具。1. SVG.js我要推荐的第一个库是SVG.js。当然,这是完全免费和开源的,可以在任何类型的web项目中使用。当gzip压缩时,它非常轻量级,
2021-04-28 14:51:39 1881
转载 markdown文档说明
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Ma.
2021-04-28 09:41:18 83
原创 前端开发需要注意的那些事
前端开发需要注意的那些事自从入行以来完成了不少项目,针对技术是写了不少bolg,但针对项还没写过,在这就写一篇一、性能优化页面中使用了大量图片和音频文件的,可以使用CND加速,托管七牛,腾讯云等。图片压缩,降低图片分辨率,高分辨比文件大小更影响页面加载速度。框架文件可以使用Application Cache 应用缓存。动画页面可以使用link标签rel="prefetch"预加载文件。压缩文件。大量的请求会导致加载过慢,使用雪碧图或合拼请求等。二、开发部署
2021-04-25 15:33:18 243
2024最全前端面试题
2024-07-15
vue+element后台管理类型框架.7z
2020-07-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人