- 博客(51)
- 收藏
- 关注
RSS订阅
原创 vue-cli3 多环境和多后端的跨域代理配置 多种实现方案
大家都知道，由于3.x的默认配置都转移到了CLI service，所以生成的项目中并没有默认配置文件，所以我们如果需要自定义一些项目配置，则需要自己在项目的根目录创建一个vue.config.js。vue.config.js里的配置项所有都是可选的，这就避免了我们去看一大堆不必要的默认配置，只需要配置自己需要的部分就行了。本文只对跨域代理这一部分的配置进行分析和讲解。我们在vue.config.js文件中创建一个vueConfig 对象，并将其导出。然后在vueConfig 对象..
2020-05-22 10:19:17
3429
原创 奇葩功能实现：级联选择框组件el-cascader实现同一级的二级只能单选，但是一级可以多选
但是其实还有一个小问题，那就是用户还是能看到面板闪了一下的，因为被关闭了又打开了一次。但是本人已经不想折腾， 谁有本事谁来解决这个问题。希望有大神看到最后，能伸出援手，给出更完美的方案，谢谢！
2023-07-11 18:02:38
6402
10
原创 详细记录前端项目使用import懒加载组件打包失败的踩坑之路
最后还是回到babel.config.js文件,尝试把这个配置删了'@vue/cli-plugin-babel/preset'，奇迹出现了，果然成了。
2023-06-07 09:46:33
3242
4
原创 关于vue 动态引入（异步加载import和require）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度
关于vue 动态引入（异步加载）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度
2022-01-26 15:59:04
24880
2
原创 前端——在浏览器输入url后发生了都发生了什么
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？主要包括以下几个基本步骤：浏览器的地址栏输入URL并按下回车。 浏览器查找当前URL是否存在缓存，并比较缓存是否过期。 DNS解析URL对应的IP。 根据IP建立TCP连接（三次握手）。 HTTP发起请求。 服务器处理请求 浏览器接收HTTP响应。 关闭TCP连接（四次挥手）。 构建DOM树， 渲染页面。 接下来对其中几个步骤展开说一下1. URL输入URL后，会进行解析（URL的本质就是统一资源定位符）..
2021-07-13 09:28:00
2406
原创 js手写一个前端压缩图片的方法，并将代码同步到github且发布到npm
本文档主要实现两个目标：用js写一个将上传的图片压缩的方法 将自己写的代码同步到github且发布到npm现在从0零开始操作，一步一步实现这两个目标；1. Prepare: 先注册NPM和github账号过程省略，进入各自的官网，创建账号npm:https://www.npmjs.com/github:https://github.com/2. Coding: 结合两个目标，编码默认你已经安装了node环境，node环境也包括了npm环境新建工程文件...
2021-05-20 11:57:10
471
3
原创 根据url生成二维码，扫描打开url的两种方法编辑器
js 根据url生成二维码，扫描打开url的两种方法场景产品给你一个url，让你做一个二维码，扫描二维码之后打开对应的url链接。比如：扫描之后弹出一个下载app的页面。实现先上html代码：<div class="qrcode-wrapper"> <img src="../static/assets/qrcode.png" title="APP下载二维码" class="image-sign" onmouseover="showQrcodeImage()"
2021-01-12 15:49:57
1749
原创 不用marquee标签， js 实现文本在页面上无间断 水平方向滚动
场景：很多人知道这个元素标签marquee， 用来实现内容在窗体中自由自主滚动，就像一个led屏幕上，一直有一行字在滚动。这个标签确实很方便，可以控制方向，速度等等。但是，marquee标签却被官方在很早之前就被废弃了。所以，我们考虑可以自己写一个组件，替代marquee标签。实现：先上html代码：<div class="parent"> <div id="scrollText" class="child"></div> .
2021-01-05 18:12:31
1049
原创 关于zTree 组件，按需动态获取子节点并展示获取到的子节点的解决方案
场景：其实也算是一个比较普遍的场景，就是加载树的时候，只加载某几层的节点，节点数据最多的最底层的节点不加载，而是在点击或者展开某个节点之后，根据点击或者展开的节点动态加载出获取到的子节点。这样能有效的提高加载树的性能，特别是某些层级的节点数据特别大的时候，更为明显。这里以zTree 组件为例，其他树组件思路和逻辑类似。解决方案：方案1: 点击树节点，获取该节点下的子节点数据，然后调用更新节点和展开节点的接口，便可实现。这个方案比较简单，常见，直接上代码：callba..
2020-12-23 19:54:56
1313
原创 vue 父子组件生命周期 分析以及 vueX 异步存储和读取
原因：对象变量都是对象在内存中的地址值，普通数据变量是实际的值。所以你打印的那个对象其实在打印的那一刻是空对象，但是你展开的时候，commit操作已经完成，所以对象被扩展为你期望看到的值。但是普通类型打印的那一刻是什么就是什么因为actions是异步操作，你在commit方法里再去打印肯定就有值了为什么对象能打印到？因为对象那个变量是地址，你展开的时候对象已经扩充了，所以能看到解决办法：1，在templent中可直间使用dt_org_data.options2，如果想在方法中使用this.dt_o
2020-12-03 19:20:52
671
原创 js 获取上传图片和视频的宽高，还有视频的时长
场景：当产品经理告诉你说：我们需要限制上传的图片或视频的尺寸，不符合要求不允许上传，这个时候你该怎么做？不用多想，很明显我们需要想办法拿到图片或视频的宽度，然后和预期的尺寸进行对比过滤，就能轻易实现这个需求。上代码：// 获取素材宽高 getMaterialResolution (info, callback) { const _this = this const reader = new FileReader() let width = .
2020-10-28 16:30:24
2009
原创 Chrome Web Devtools 调试详解
Chrome Web Devtools 调试详解目录Chrome Web Devtools 调试详解... 11. Chrome Devtools 的用处... 12. 菜单面板拆解... 23. 常用命令和调试... 21. 呼出快捷指令面板：cmd + shift + p. 22.DOM断点调试... 43. 黑盒脚本：Blackbox Script 54. 事件监听器：Event Listener Breakpoints. 65. 本地覆盖：...
2020-10-09 11:33:30
698
原创 关于前端需要关注的那些nginx配置和功能
Nginx简介：先引用一段来自百度百科的介绍：Nginx(engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。2011年6月1日，nginx 1.0.4发布。Nginx是.
2020-09-17 11:53:33
410
原创 Win10远程桌面报错：出现身份验证错误, 要求的函数不受支持，这可能是由于CredSSP加密Oracle修正
也不知道咋回事，突然有一天打开远程桌面连接，就进不去了，报这个错（win 10系统）：出现 身份验证错误，要求的函数不受支持。这可能是由于CredSSP加密数据库修正。我猜测是win10系统进行某个更新之后导致的。先不管了，找了一通方法，有针对各种系统的办法，试了好几个都不行，连windows提供的方法也不行。最后，找到了。因为我是win10系统，所以下面这个方法暂时只在win10系统上得到验证：键盘输入windows+R输入gpedit.msc， 点击确定 本地计.
2020-08-20 19:26:06
381
原创 base64，string，blob, blob url互转的方法
话不多说，直接上代码：<一>base64 转 blob1，通过第三方包：b64-to-blobimport b64ToBlob from 'b64-to-blob'public base64ToBlob(base64: string): Promise<Blob> { return new Promise((resolve, reject) => { try { let arr .
2020-07-31 16:46:12
1048
原创 前端从后端导出excel表格文件的两种方法
大部分前端开发人员在做项目的过程中应该都遇到过这个问题：在前端点击一个导出或者下载的按钮，从后端导出包含列表中的数据的excel文件。那么如何实现呢？方法一：如果项目中没有涉及要要权限验证的问题，可以直接让后端返回你一个下载文件的地址，然后前端直接访问该地址就可下载文件到本地。比如：window.location.href= url这个方法一般是不会用的，因为正常点的项目基本都会涉及到token验证等问题，你直接访问下载链接是会被拒绝的。当然你也可以选择将token直接带在.
2020-07-27 18:03:53
11565
5
原创 如何在线读取并下载后端某个文本文件的内容
场景：很多情况，我们一般是会选择本地的文件，然后预览并且上传文件到后端，但有的时候如果需求是让你从后端在线获取一个文本文件，并且直接读取展示在页面上，这个时候你该怎么实现这个需求？直接上代码：其实很简单，我们暂时忽略原生XMLHttpRequest请求的方式，直接使用jQuery封装的ajax来请求后端接口success之后直接将返回的函数中拿到文本文件里的内容result。然后将result的内容展示到富文本框中。下面的success回调方法中，四种方式都可以将读取到的文本内容动.
2020-06-30 08:59:14
342
原创 利用time-Picker组件如何封装一个时间范围选择组件
场景：使用过ant-design组件库的人基本都知道，它的time-picker组件并不像date-picker组件那样，支持时间范围选择。所以，这个时候就只能自己手动来封装一个了。下面正式开始：定义一些prop属性:props: { // 时间显示格式 timeFormat: { type: String, default: 'HH:mm' }, // 组件绑定的值 timeData: { type: .
2020-06-23 17:38:22
1251
原创 谈谈Javascript 中 promise、async和await， setTimeout的执行顺序
Javascript有一个main thread主线程和call-stack调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。JS调用栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。Javascript单线程任务被分为同步任务和异步任务，同步任务会在调用栈中按照顺序等待主线程依次执行，异步任务会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。...
2020-05-18 16:40:12
430
转载 围观 GitHub 重磅推出的四大新功能
原文链接：https://mp.weixin.qq.com/s/ZZok4kki_Djg_GKg0Xg_HA众所周知，GitHub 拥有数千个的软件社区，从开源项目到企业，从小型团队到大型组织。今年的 Satellite 主要围绕为社区提供工具和解决对开发者来说很重要的问题。今年早些时候，我们为团队免费提供了 GitHub，以确保成本不会成为 GitHub 上团队合作的障碍。我们将...
2020-05-08 09:11:03
597
原创 vue 下载本地文件
情景描述：有时，我们需在在前端项目中下载本地某个地址的文件模块，这个文件不想放在后端去下载。所以，在这个文件大小不是太大的情况下，我们可以把文件放在前端项目目录中，这样不管开发环境还是生产环境，都能在同样的路径下找到那个文件。实现：1. 先得把文件放在项目工程目录下的某个路径下，这个路径不管是开发环境还是打包之后在生产环境，都是一样的。在vue-cli 3.x+的版本中，这个文件...
2020-04-29 15:16:25
10440
原创 ant-design table组件rowSelection列对勾选和未勾选分类排序
场景描述：在表格第一列显示勾选框，支持行多选。然后在这一列的列头增加排序按钮，对已勾选和未勾选的行进行排序。解决方案：常用的解决方案有两种：1，利用table组件本身的rowSelections属性，对其进行封装改造，实现需求。2，给表格绑定的数据增加一列，列头样式为勾选框+排序按钮。数据列显示勾选框组件。这里为了充分利用table组件本身的接口方法，采用第一种...
2020-04-29 10:00:41
3405
转载 浅谈大型项目前端架构设计（转载）
原文链接：https://juejin.im/post/5cea1f7051882506400054721、综合我在2年之前，写过一篇中小型项目的前端架构浅谈。随着能力的上升，以及在阿里巴巴工作的经验，是时候写一篇大型项目的前端架构分析了。本篇文章不会更多侧重于具体技术实现，而是尝试从更高角度出发，分析为什么要这么做，这些设计能解决什么问题，成本和收益如何。由于作者能力有限，...
2020-04-26 18:10:23
1013
原创 vue 给ant design table 组件自定义点击行（选中行）样式和斑马纹样式
写在开头：element-ui的table组件有几个属性很好用，但是ant-design中table组件是没有的。比如：stripe：是否为斑马纹 table。highlight-current-row：是否要高亮当前行。当然，还有好几个其他的属性，但是本文先只讲这两个。既然element-ui有，ant-design没有，那我在用ant-design的table组件时，...
2020-04-26 13:57:51
10324
4
原创 利用filetr 操作 ant-design table某一行的某一列的数据。点击切换真实数据和加密数据
情景描述：如果有这样一个需求，在table中的某一列的数据，不能直接展示原始数据，而是使用加密符号代替，只有点击了某行某列之后，才能切换到真实数据，每次点击就是一次切换。这样类似的需求你会怎么实现？这里使用ant-design UI框架中的table组件做为例子来讲。首先，肯定会想到用filter(angular中叫pipe，vue里面叫filter)。上代码：&l...
2020-04-23 15:56:46
3152
原创 树组件 如何 通过父节点筛选整个树结构数据 且 支持缓存所有勾选状态的节点数据
情景描述：很多时候，如果一个树的数据父级节点太多，可能导致树需要展示的节点太多，这样不利于查找和勾选。所以，如果能对树的某一级父级节点进行筛选，每次筛选之后只展示该节点下的所有子节点，这样会增加查找和勾选子节点的操作效率。这里，采用ztree组件举例：1. 在树组件内加一个单选下拉框，下拉框绑定的数据是需要筛选的父级节点 列表。2. 切换该下拉框选项时，隐藏并展示相应的节点...
2020-04-23 15:16:48
742
原创 Nginx 部署 vue项目 （history模式）
大家都知道，vue router有两种模式：1，hash模式hash模式应该是平时大家用的最多的一种模式，它的标志是路由地址都会加上#。2，history模式history模式则不会加上#号，这样url看起来比较干净。但是使用history模式，会导致一个问题，就是在某个路由页面上刷新的时候或者直接访问多级路由url的时候会报404.import Vue from 'vue'...
2020-04-09 10:27:42
3368
原创 ant-design table 组件 列头名称 国际化i18n问题 解决
话不多说，直接进入主题。ant-design 在使用它的table组件的时候，不知道你们有没有需求说需要翻译列表头部名称：在切换语言的时候，table的列头名称 并不会同步更换对应语言， 而是需要你重新laod或者切换页面之后才生效。官方文档没有涉及相关问题的解决办法，其实很明显原因就是切换语言的时候，表头的i18n全局指令变量没有被触发：这是正常使用ant-design tabl...
2020-04-03 17:34:27
4292
10
原创 如何将自己写的代码同步到github并发布到npm
1. 很明显，先注册NPM和github账号过程省略，进入各自的官网，创建账号2. 写代码默认你已经安装了node环境，node环境也包括了npm环境新建工程文件夹，然后执行下面的命令，初始化一个package.json文件npm init -y{ "name": "a-string-is-null-empty-undefined", "version":...
2020-03-31 17:39:28
1870
2
原创 js 找出一个 string 中的的大写字母，并将其替换成其他字符
话不多说，上代码sortFieldMatch (string) { const stringArray = string.split('') // 将字符串分割成相应的字符串数组 let newField = field stringArray.forEach(t => { if (/[A-Z]/.test(t)) { ...
2020-03-30 08:59:50
2842
6
原创 vue-cli 3以上的版本 前端配置 多服务跨域代理
vue cli 3以上的版本，跨域代理不再需要放在build文件夹下，而是直接在vue.config.js中vueConfig配置devServer选项。先上代码：devServer: { // development server port 8000 port: 8000, // If you want to turn on the proxy, please ...
2020-03-19 11:27:18
770
原创 前端 从后端获取（下载，导出）文件的方法
场景：很多时候，前端存在需要从后端下载文件的情况，典型的就是导出excel表格。一般存在两种方式：1，请求接口之后，直接打开请求该文件的地址，下载到本地。2，请求接口之后，将获取到的文件数据格式转换之后，再下载到本地。先说第一种:很简单，请求完接口之后，打开该文件的地址：window.location.href=res.request.responseURL...
2020-03-18 09:24:03
10148
2
转载 带你深度解锁Webpack系列(优化篇)
本文转载自：https://mp.weixin.qq.com/s/Rv1O4oFvj6rVpijUXtfyCA前两篇文章中，主要是讲解了Webpack的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对Webpack的配置进行优化。如果你还没有看过前两篇，推荐先阅读《带你深入解锁Webpack系列(基础篇) 》和《带你深入...
2020-03-16 08:49:48
1107
转载 深度解锁Webpack系列(中)（转载）
本文转载来自：https://mp.weixin.qq.com/s/t8dW5TlASCAb_Cdowb8isA本文是第二篇，如果你还没有阅读《4W字长文带你深度解锁Webpack系列(基础篇)》，建议阅读之后，再继续阅读本文。本文会引入更多的webpack配置，如果文中有任何错误，欢迎在评论区指正，我会尽快修正。webpack优化部分放在了下一篇。推荐大家参考本文一步一步...
2020-03-10 09:58:22
227
转载 深度解锁Webpack系列(上)（转载）
本文转载来自：https://mp.weixin.qq.com/s/X9fWN4GbDFOLfOODZlLoVg1.webpack 是什么？webpack是一个现代JavaScript应用程序的静态模块打包器，当webpack处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。2.webpack 的核心概念...
2020-03-10 09:56:05
273
原创 高德地图 web api 使用
1. 高德地图开发者官网新建开发账号https://lbs.amap.com2.在项目index.html中引入对应key值的web api3.在相应的页面添加map元素，并初始化一个map对象<div class="mapContainer" id="myMap"></div>_this.mapObj = new AMap.Map(...
2020-03-05 13:56:27
2664
原创 阿里 图标 icon iconfont 实现离线使用
1.将你项目中的图标打包下载下来2.下载到本地之后，将离线文件复制到你的项目路径下这是下载来的压缩包完整的文件列表这是我复制到项目对应路径里文件，其中红框标记的五个文件是必须要的3.导入ali图标css文件在项目主文件main.js(vue)中, 导入ali 图标 css文件，且移除之前添加的在线使用ali 图标的引用链接4.直接使用ali icon c...
2020-03-05 09:28:28
3204
1
原创 webpack-theme-color-replacer webpack插件 实现web项目 全局修改主题颜色
最近发现了一个非常好用的webpack插件：webpack-theme-color-replacer:https://github.com/hzsrc/webpack-theme-color-replacer顾名思义，可以轻松实现整个项目主题颜色的替换。引用下插件作者的思路：基本思路就是，webpack构建时，在emit事件（准备写入dist结果文件时）中，将即将生成的所有cs...
2019-12-30 17:24:01
16338
22
原创 vue-cli 2.x 升级到 @vue/cli3.x + 的踩坑之旅
最近由于新项目需要升级到@vue/cli3.x +, 所以我开启了本来以为非常简单顺利的升级踩坑之路。首先卸载vue-cli 2.xnpm uninstall -g vue-cli接着，全局安装@vue/cli3.x +npm install -g @vue/cli由于现在已经有了@vue/cli4.x的版本，所以默认一次性直接就升级到了@vue/cli 4.1.1本来...
2019-12-17 11:14:12
2122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人