weixin_38629440的博客

原创 ant-design-vue和element-ui冲突解决方案

我这个项目vue2，主要使用ant-design-vue；但是ant-design-vue，table有一些我无法处理的缺陷(也许是本人菜)；因此引入了element-ui部分组件(el-table, el-table-column)；查看node_modules/ant-design-vue/es/index.js，主要对下面这些内容挂载到Vue.prototype；将这块重新到utils文件夹下，并在main.js内使用；// 主UI框架使用ant-design-vue;文件二：main.js。

原创 vue3相较于vue2有哪些修改？解决了哪些问题？

/ Vue2})// Vue3})更好的代码组织和复用更强的类型支持更高的性能更小的包体积更现代的开发体验。

原创 Webpack 和 ESM 的关系

Webpack支持ESM语法，但会转换为CommonJS转换是为了兼容性和功能需求Vite直接使用原生ESM，更现代两者各有优势，适用于不同场景选择工具要考虑项目需求开发体验和兼容性要平衡构建工具在不断发展保持对新技术的关注。

原创 编译打包之 webpack vs vite

项目需求浏览器兼容性开发体验构建性能配置复杂度插件生态团队熟悉度维护成本。

原创 vue2默认的webpack配置

开箱即用配置完善性能优化开发体验好维护方便社区支持文档完善稳定性高。

原创 iframe的src和iframe下的document不同源

iframe的src是不随着src加载的内容修改location而改变，src请求直接304重定向，location是另外一个地址，就会导致这个问题。iframe的src和iframe下的document不同源;

原创 webpack常用loader

文件类型处理需求性能影响维护成本社区活跃度文档完善度版本兼容性使用复杂度。

原创 webpack常用plugin

项目需求性能影响维护成本社区活跃度文档完善度版本兼容性使用复杂度配置灵活性。

原创 webpack-plugin 之 html-webpack-plugin

自动生成HTML文件自动注入打包资源支持模板系统提供丰富的配置支持多页面应用可扩展性强使用简单维护方便。

原创 webpack-hooks 说明

选择合适的hook时机正确处理异步操作注意执行顺序做好错误处理考虑性能影响保持代码简洁添加适当注释遵循最佳实践。

原创 webpack-loader 开发起步

功能单一配置灵活性能良好易于使用文档完善可测试性强错误处理完善支持缓存。

原创 webpack-plugin 开发起步

功能单一配置灵活性能良好易于使用文档完善。

原创 编写一个loader的流程和编写一个plugin的流程----[Webpack Less全局变量注入方案][env-html-plugin.js]

创建实现自动注入全局变量的功能使用fs和path模块读取全局变量文件创建实现在HTML中注入环境变量的功能使用webpack的compilation hooks在HtmlWebpackPlugin处理后修改HTML内容。

原创 自定义geo-json地图绘制

1、自定义geo-json数据的获取市面上通用的区域都能下载到geojson数据，但是部分需求需要增加自己的自定义geojson区域，如xx片区可以通过下面的网址(外网，需要挂vpn)，进行geojson数据绘制，绘制后可以一键copy网址: https://geojson.io/#map=11.16/31.892/117.1537操作示例：2、绘制可以使用地图绘制软件进行绘制如：...

原创 openLayers专题-地图加载-地图事件-地图悬浮层

1、地图加载

原创 electron学习记录-学了忘，忘了学，学了还得忘~

1、序言：光快速入门就搞了快一下午，先是遇到npm证书过期，然后npm config set strict-ssl false后，又报各种错，总之重装npm(不是重装node 是npm install -g npm)+ 淘宝镜像 + ssl:false解决了electron的node_moudles，我一直安装不上，现在都是；最终还是我从其他项目中copy了出来；除node_modules之...

原创 单行溢出省略 ；多行溢出省略； ... /。。。/ ？？？/anything

溢出省略，肯定得有尺寸，尺寸规定好后，文本溢出，就得省略1、单行溢出white-space： nowarp；text-overflow： elips2、多行溢出text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:...

原创 webpack动态加载组件，components is=xxx; xxxx自动加载，加载不到还能保底加载个base组件...

目前有个vue2项目，h5；展示多个卡片内容，卡片内容根据后台返回的数据结构展示对应的内容。1、template中：【组件渲染】点击查看代码<component :is="chartsName" :id="name" :focusTag='focusTag' ref="tplItem" :title="cardName"...

原创 自适应代码

adapterFunc(){(function (win) {document.body.style.zoom = 1;// document.body.style = width:1920px!important; height:960px!important;overflow: hidden;function refreshScale () {let docWidth = docu...

原创 vue项目打包发现index.js加载了两次？差别在于请求头purpose：prefetch

上线后打开f12，开启禁用缓存 =>发现index.js加载了两次；6.6M直接双倍流量；一番研究得知：vue-cli打包时，会将一些文件preload和prefetch；(1)preload(预先加载文件)app.js vendor.js(2)prefetch(闲时加载)index.js / router懒加载独立打包的文件【就是那串注释标明打包在xx模块用的】再者：启用缓...

原创 promise.all理解

1、promise.allpromise.all([p1, p2, p3]).then(res=>{1、当p1 ， p2， p3 全都是reslove状态，执行到此}).catch(e=>{1、当入参【】里面的promise没有定义catch且reject了，执行到此}).finally(res=>{res: reslove出来的数组1、当入参【】里面的promi...

原创 前端自动复制功能

一、步骤1、input，value是你想复制的内容2、聚焦input的文字，input.select()3、执行copy命令 document.execCommand("Copy")4、判断是否成功——不准确，但是有比没有好。二、代码实现let inputs=document.createElement("input") //创建节点inputs.value=res.dat...

原创 当devserver的changeOrigin没用，后端还用了same-origin！就这么处理

changeOrigin: true,pathRewrite: {['^/' + process.env.VUE_APP_BASE_API]: ''},headers:{//改写Origin,注意结尾不含 /Origin:"http://112.28.109.249:9997",//改写RefererReferer:"http://112.28.109.249:9997/",H...

原创 react 公司项目学习 【react+webpack+nw.js + mobx+react-intl 实现的多页面多语言windows桌面端exe】...

这几天突然要来个react项目；听说还比较复杂；项目组内就两个人会react还在忙，整组主要是用vue；那就学吧；一、研究代码结构不得不说，这目录结构搞得有点复杂，算是我接触中除了乾坤和electron之外，相当复杂的了，慢慢阅读吧；这里有个链接是多页面处理的，跟我这个类似，但我接手的这个更加灵活多变；入口文件是动态的，出口文件也是；https://blog.csdn.net/weixin...

原创 微信浏览器环境H5使用扫一扫功能

一、需求：1、微信浏览器环境H5使用扫一扫功能=>方案：引入wxjssdk，然后获取公众号的签名信息；再在config中配置；配置好了就能使用扫一扫api了2、短信链接内部实现扫一扫功能=>方案：使用input accpet=“image/*”，读取图片区识别，识别二维码数据后发送给后台|--> 由于手机浏览器兼容性问题，部分确实可以实现该功能，具体流程就是：获取手机摄像...

原创 beforeRouteEnter的执行时机以及其参数next的内部参数vm=>{}的执行实际

beforeRouteEnter:(to, from, next)=>{console.log(1)next(vm=>{console.log(2)})}这里是先打印1，后打印21的时机是：to页面进入前，to页面的create都没执行2的时机是：to页面已经进入了，并且to页面的beforeMount执行后，mounted函数执行前，才去执行vm=>{}，并打...

原创 atob btoa 加解密

atob(arg) 对arg进行解密atob(str) 对str进行加密1、兼容性：2、注意：我这次加密的时id字符串，其中只包含字母和数字；加密方法中的参数，只能包含： 数字，大小写字母，应文标点符号，具体字符集是： latin1字符集；可自行百度查看其涵盖哪些字符；如果str中包含中文，中文字符等不能识别的，就会报错DOMException： The string to be...

原创 postcss px转不转rem呢？

1、用postcss时，有时候你的px不转rem；你希望他转；如： elementui的labelWidth配置了数值但是不转原因：行内元素都不转解决方法：放到vue的style元素中就行啦2、有的你不希望他转解决方法：方法1：px单位改为大写 PX方法2：这行css后注释上 /* no */why? 我看了下postcss的源码；大体就是先把这个css字符串转为css的AST【...

原创 全局事件总线

全局事件总线——就是用来组件间通信使用的；可以理解为事件订阅main.js就一行代码Vue.prototype.$bus = new Vue()1、组件种订阅this.$bus.on(eventName, function(params){})2、组件中发布this.$bus.$emit(eventName, params)解释：去官网可以看到一些用法 : vm.$on vm.$...

原创 前端文件转换

file文件的拷贝和改名// 复制文本域中的file文件并重命名let myFile = new File([file], "新文件的名字"]);bolb格式转base64格式function blobToDataURL(blob, callback) {let reader = new FileReader();reader.onload = function () {c...

原创 属性inset 和 属性值unset

属性inset 的值，是： 上右下左的值inset: top right bottom left;css取值 unset：恢复默认

原创 前端断点续传

前端文件如果需要实现断点续传；那么就涉及这么几个东西；1、文件的唯一标识：文件的md5值2、文件的读取和切片的方法：FileReader对象； 这个支持率不是很高有了这两个东西，断点续传就好做了；前端拿到一个文件后；先用FileReader读取这个文件流，然后获取md5值并切片，切片上传；每次上传需要带上切片文件内容和md5以及切片序列；具体操作方法自己去看文档；至于断点续传，这就和...

原创 微信小程序相关

1、框架选型原生微信小程序写法uniapp-cli vue写法uniapp-hBuildX xue写法上述三个选项一般使用下方两个；毕竟在不修改代码写法的基础上，很易上手2、UI选型uView-移动端多端开发_目前上手感觉不错，微信小程序选他没错的mintUI-饿了么团队mui-停止维护了vant-有赞前端团队-just for miniProgranm 微信小程序选他也没错的...

原创 微信小程序vconsole，为什么线上版本还有vconsole？

打开开发版或者体验版，点击三个点然后关闭调试功能；再次进入正式版，就不存在vconsole了。同时！这也是调试线上版本的方法哦

原创 v-show 和 flex 冲突

why v-show 和 flex 冲突？v-show => display: noneflex => display: flex所以冲突；可以在外层嵌套template v-show ；在uniapp上不要用template

原创 .gitignore

.DS_Storenode_modules/unpackage/dist/# local env files.env.local.env.*.local# Log filesnpm-debug.log*yarn-debug.log*yarn-error.log*# Editor directories and files.project.idea.vscode...

原创 原生小程序和uniapp开发的坑

1、uniapp编译成微信小程序，微信开发者工具报错: xxx文件找不到，明明就在那里解决方法：关闭，重新打开就好了；再不行就重启，绝对能解决2、微信小程序只支持一次性上传一个文件，不支持多文件上传；可是我这里ocr识别，需要上传多张图片解决方法： wx-multipart插件进行多文件上传；其原理就是使用一个ajax带多个文件，文件需要被编码后(binary)上传，越过微信的wx.up...

原创 前端框架中加入外部config可配置文件，根据不同的运行、编译环境，加载不同的配置文件...

需求：我们的乾坤vue框架，需要集成给第三方，menu由他们处理(包括菜单权限)，我们只负责提供一个去除menu和头部的main即可；这里需要可配置，不能把我们的menu弄丢了。实现方式：1、在src同级目录新建 public/plugins/config.js因为是基于webpack打包，会自动过滤public下的文件，复制到打包后的dist文件夹下，所以这个文件不会被打包压缩；可供给...

原创 iframe通信

原创 《将博客搬至CSDN》

《将博客搬至CSDN》