- 博客(41)
- 收藏
- 关注
RSS订阅原创 前端项目打包构建优化
cache默认生成在node_modules/.cache/terser-plugin文件下，通过SHA或者base64编码之前的文件处理结果，并保存文件映射关系，方便下一次处理文件时可以查看之前同文件（同内容）是否有可用缓存，默认存放在内存中，可以修改将缓存存放到硬盘中。我们需要自己手动配置的事情更少了，而图片压缩处理就是其中的一件，vue项目中的图片文件过大，会导致打包体积增大，需要将大文件的图片进行压缩从而缩小打包体积。帮我们把项目中一些没有使用过的代码删除，减少项目体积的插件。
2025-03-18 00:47:30
685
原创 webpack自定义plugin
webpack.config.js配置output: {},plugins: [banner: '测试测试测试测试'})FooterPlugin文件${thisconst {const {*/`})})bundle.js文件尾部添加注释效果。
2025-03-16 16:35:20
401
原创 浏览器安全问题
中间人攻击是指攻击者与通讯的两端分别创建独立的联系，并交换其所收到的数据，使通讯的两端认为他们正在通过一个私密的连接与对方直接对话，但实际上整个会话都被攻击者完全控制，在中间人攻击中，攻击者可以拦截通讯双方的通话并插入新的内容。DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执⾏恶意代码由浏览器端完成，属于前端JavaScript ⾃身的安全漏洞，⽽其他两种 XSS 都属于服务端的安全漏洞。XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。
2025-03-07 13:57:26
469
原创 docker简介
我们希望有一个工具可以帮助我们一键智能部署，假如你要部署在多台不同的机器上，可以不用担心不同系统，不同版本的差异，以及运行之前需要安装不同软件的痛苦。当红的虚拟化软件：Dockerhttps://www.docker.comDocker的进化下载地址： https://www.docker.com/products/docker-desktop可以在https://hub.docker.com/search?q=&type=image中获取各种官方的镜像，并且可以上传你自己定义镜像Docker镜像仓库
2024-10-04 17:39:42
1314
7
原创 nodejs笔记
由于Node环境执行的javascript代码是服务器代码，所有，绝大部分需要在服务器运行期反复执行业务逻辑的代码，必须使用异步代码，否则，同步代码在执行期，服务器停止响应，因为javascript只有一个执行线程。有些流用来读取数据，比如从文件读取数据时，可以打卡一个文件流，然后从文件流中不断地读取数据，有些流用来 写入数据，比如同文件写入数据时，只需要把数据不断地往文件流中写进行就可以。执行命令nrm ls 查看可选的源，其中，带*的是当前使用的源，上面的输出表明当前源是官方源。
2024-09-05 15:31:01
1145
原创 vue3 动态组件component不生效问题
因为vue3使用的是setup语法，组件只要import导入就行 不需要再像vue2中在components挂载，这样导致我想渲染的组件是没有渲染出来页面出现空白，尝试了很多办法对应的组件里面添加多个script指定对应的组件名，还是没生效。在vue3使用component动态组件展示组件时，组件就是不展示显示空白。使用shallowReactive或者shallowRef把对应的组件名称重新定义下，遍历component时，is采用对象key获取对应的对应的组件，这样组件就显示出来了。
2024-08-28 15:04:54
799
原创 如何将本地组件库上传到npm上
基于vue开发项目怎么把本地开发的组件发布到npm上面，我们需要去了解vue封装组件的原理，利用vue.use(plugin)这个api, 我们需要把封装好的组件打包成vue库，并提供install方法发布到npm上去，Vue.use(plugin)自动执行插件中的install方法。我们在这里主要介绍的主要是怎么把已经开发项目中的公共组件怎么打包发布到npm上面。
2024-08-16 16:46:31
826
原创 脚手架简介
主命令：vuecommand的param: vue-test-app它表示创建一个vue项目，项目的名称为vue-test-app,以上是一个较为简单的脚手架命令，但实际场景往往更加复杂，比如：这里的–force叫做option,用来辅助脚手架确定在特定场景下用户的选择(可以理解为配置)。
2024-08-15 17:52:40
733
原创 微前端概念
元素隔离的概念来自ShadowDom,即ShadowDom中的元素可以和外包的元素重复但不会冲突，micro-app模拟实现了类似ShadowDom的功能，元素不会逃离
2024-07-29 19:15:35
1072
1
原创 前端性能优化
简单来说就是你的网站够不够快打开速度动画效果表单提交列表滚动页面切换。。。MDN上的web性能定义：Web性能是网站或应用程序的客观度量和可感知的用户体验减少整体加载时间： 减少文件体积、减少HTTP请求、使用预加载使网站尽快可用：仅加载首屏内容，其它内容根据需要进行懒加载平滑和交互性：使用css替代js动画、减少UI重绘感知表现：你的页面可能不能做得更快，但你可以让用户感觉更快。耗时操作要给用户反馈，比如加载动画、进度条、骨架屏、等提示信息。
2024-07-26 15:24:46
1610
原创 React路由笔记
Switch></Switch>exact 精确匹配 (Redirect 即使使用了exact, 外面还要嵌套Switch 来用)stack,这个警告只有在hash 模式会出现。react-router ：核心模块，包含 React 路由大部分的核心功能，包括路由匹配算法和大部分核心组件和钩子。
2023-12-11 15:04:58
895
原创 react笔记
当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。必须以"use"开头吗？必须如此，这个约定非常重要，不遵循的话，由于无法判断某个函数是否包含对某内部Hook的调用，React将无法自动检查你的Hook是否违反了HooK的规则。
2023-12-11 13:44:50
1150
原创 Typescript笔记
JS 已有类型原始类型，简单类型（ number/string/boolean/null/undefined ）复杂数据类型（数组，对象，函数等）TS 新增类型联合类型自定义类型（类型别名）接口元组字面量类型枚举void泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中创建一个 id 函数，传入什么数据就返回该数据本身(也就是说，参数和返回值类型相同)
2023-11-19 01:07:05
113
原创 el-tree回显 包含父节点子节点全部选中问题
在做权限的时候，提交数据会把选中与半选中的数据提交给后台，但是在回显时后台返回的数据包含父节点，导致子节点全部选中。解决方法，在回显的时候把后台返回的数据中把所有的父节点给删掉这样就能问题。a. tree 数据结构。b. 回显数据包含父节点。
2023-09-12 10:09:14
1183
1
原创 Mysql概述--基础篇
执行如下脚本，创建emp表与dept表并插入测试数据-- 创建dept表，并插入数据 create table dept(id int auto_increment comment 'ID' primary key , name varchar(50) not null comment '部门名称') comment '部门表';
2023-07-21 13:16:31
464
原创 mysql安装与卸载
要想使用mysql，我们首先先得将Mysql安装好，我们可以根据下面的步骤，一步一步的完成Mysql的安装。如果已将MySQL卸载，但是通过任务管理器—>服务，查看到MySQL服务仍然残留在系统服务里。4). 选择 “新建” , 将MySQL Server的安装目录下的bin目录添加到环境变量。安装好MySQL之后，还需要配置环境变量，这样才可以在任何目录下连接MySQL。安装MySQL的相关组件，这个过程可能需要耗时几分钟，耐心等待。2). 点击左侧的 “高级系统设置”，选择环境变量。
2023-07-17 09:10:08
104
原创 Git概述
本地仓库：开发人员自己电脑上面的git仓库远程仓库：远程服务器上的git仓库commit: 提交，将本地文件和版本信息保存到本地仓库push: 推送，将本地仓库文件和版本信息上传到远程仓库。
2023-05-20 15:06:59
106
原创 vue + scss实现管理系统换肤功能
因公司需求，需要实现管理系统主题换肤功能，主要是实现4种不同的系统肤色，极简白、幻境紫、景泰蓝、复古黑，这不仅仅是颜色的更改，还需要包括图片，字体、按钮等更改。1.theme.scss文件主要实现的是编写对系统主题改变的样式函数，通过传递样式参数来实现不同主题的样式更改。在styles样式文件夹下创建两个scss文件，一个theme.scss,一个color.scss。2.color.scss编写不同主题的样式函数并传递样式参数。
2023-03-27 09:55:14
782
原创 小程序切换前后台获取实时地理信息进行定位上报
在做小程序有个需求要采集司机定位并进行上报给后台，之前用了wx.getLocation() 和定时调用setinterval在一定的间隔内进行采集和上报司机位置，但是频繁调用时它给我返回报错信息 官网解释 高频率调用会导致耗电 ，而且2.17.0 增加调用频率限制，后面使用了wx.startLocationUpdateBackground 和 wx.onLocationChange 不管是切换前后后都能获取地理位置信息。
2022-11-05 00:10:17
3217
原创 高德地图使用vue-amap开发 页面刷新地图空白
使用vue-amap地图开发的时候，刷新页面地图就不显示了。因为刷新的时候AMapUI没有加载出来导致地图显示空白。使用remoteLoad 来解决// remoteLoad.jsexport default function remoteLoad(url, hasCallback) { return createScript(url) /** * 创建script * @param url * @returns {Promise} */ function cr
2021-10-19 10:28:07
6784
5
原创 Vue生命周期函数
生命周期函数介绍：生命周期函数是指组件从创建到销毁的过程自动执行的函数(生命周期函数是组件所经历的过程，跟代码顺序无关)。它大概可以分为3个阶段：挂载 => 更新 => 销毁。挂载分为：beforeCreate、created、beforeMount、mounted; 更新分为：beforeUpadte、updated; 销毁可以分为：beforeDestroy、destroyed；图示：钩子函数详解beforeCreate此钩子函数发生数据监测和数据代理之前，实例初始化之后被调用。
2021-09-29 16:18:13
191
原创 高德地图自定义车辆定位marker以及弹出框窗口
地图安装npm install vue-amap --save项目中设置高德地图安装成功后在main.js设置以下内容import VueAMap from 'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({ key: '你的key', plugin: ['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', '
2021-09-29 10:24:38
1436
原创 vue + threejs 实现3d装车
安装npm install threejs -D引用threejsimport * as THREE from 'three'// 鼠标控制器import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'// obj模型import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'// 材质import { MTLLoader } f
2021-07-23 11:01:33
3305
3
原创 vue文件上传组件，使用原生input file实现
vue 实现输入框右侧icon文件夹点击上传图片组件a. 调用图片上传父组件formData 就获取 图片上传组件传过来的地址。// html<upload-image v-model="formData" />b. 图片上传组件// html <template> <div> <el-input clearable v-model.trim="uploadImgUrl" size="mini"
2021-07-04 02:51:17
1156
原创 js mouseup丢失问题(不执行)与解决办法
当实现鼠标在可视区域上面进行拖动的时候，经常出现 mouseup 事件丢失的情况，导致正常的流程没法执行。元素执行mousedown 在可视化区域上面拖动一段时候鼠标松开 有些时候mouseup不会执行。解决方法：mounted() { this.init()},methods: { init() { document.body.addeventlistener('mouseup', () => { // mouseup 需要执行的代码块 ....
2021-07-04 02:09:02
4477
2
原创 移动端拖动元素导致页面返回上一层
解决方法一：html{ touch-action:none; touch-action:pan-y;}解决方法二： var startX,startY;document.addEventListener("touchstart",function(e){ startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY;});document.addEventListener("touchm
2021-01-07 14:59:22
4278
1
原创 vue element DateTimePicker日期时间选择器二次封装
在管理系统项目开发中，使用elementUi库日期时间选择器是最常见的也是最常用，需要使用的话一个一个写的很麻烦而且不方便使用，封装成组件的话方便于管理只要用就调用这个组件就可以使用。子组件：type显示类型 可以分别为 year/month/date/week/datetime/datetimerange/daterangevalueFormat 绑定值的格式,一般是参数传到后台的数据格式pickerOptions: 快捷键以及配置项defaultTime：选中日期后的默认具体时刻 数据格式为
2020-12-11 22:58:23
2943
原创 js数组操作
两个字段一个是用户的id 一个是用户的名称，需要把这两个字符转成数组再转成对象数组var str1 = '小明,小兰,小钱'var str2 = '12,13,15'var str1Arr = str1.split(',')var str2Arr = str2.split(',')var result = str1Arr.map((val,i) => ({id: val, val: str2Arr[i]}));2.两个数组arr1 = [ {id: “#11”, val: “徐.
2020-12-07 09:53:37
505
原创 vue element el-date-picker日期选择器选择时间区间
1.在项目中使用到了element日期选择组件，选择日期区间最大为6个月之前是让不在这区间给限制不让选择html部分 <el-date-picker v-model="params.dateTimeRangeVal" type="datetimerange" :editable="false" value-format="yyyy-
2020-12-04 10:57:59
6422
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人