前端学狗-CSDN博客

原创使用 SSH 密钥配置 Git 账号需要以下步骤

f /Users/XXXX/.ssh/id_rsa_my_personal 如果不加这一段设置，直接创建的文件会默认是id_rsa。最后，将 Git 的远程仓库 URL 从 HTTPS 切换到 SSH（如果你本身就是SSH方式克隆的代码，就不用执行这一步）。打开你的 Git 托管服务（如 GitHub、GitLab 等），进入账户设置页面，找到 SSH 密钥设置，将你的公钥（通常是。是用于生成 SSH 密钥对的命令行工具，常用于安全连接到远程服务器。如果你使用的是其他文件名，请将。

2024-04-28 16:24:33 397

原创【JS基础知识2】你是不是也傻傻分不清节流和防抖

大家好，我是小梅作为在前端领域不断探索的一员，最近处于待业状态。现在开始在此记录准备面试的基础知识点。如果你也遇到了相同的问题，希望本文对你有帮助。节流和防抖的实现，相信大家基本上都是直接使用库提供的方法防抖和节流方法。但是面试的过程中总是容易被问到，本人对于这种定义相似的概念经常记不住，因此写下文章来加深印象。

2024-04-23 18:50:03 246

原创【JS基础知识1】for...in、for...of你也经常傻傻分不清吗

大家好，我是小梅作为在前端领域不断探索的一员，最近处于待业状态。现在开始在此记录准备面试的基础知识点。如果你也遇到了相同的问题，希望本文对你有帮助。

2024-04-18 12:18:17 244

原创 umi.js npm install 报错TypeError: build is not a function

问了ChatGPT，它提示我清掉npm缓存重新安装依赖，尝试了不行。最终在umi的github仓库找到了解决办法，有人遇到过同样的问题。今天接手公司的项目，在安装依赖的时候报了如下的错误。就不会有这个问题（其他node版本没有尝试）：升级node版本，升级到。

2023-07-17 17:49:15 732

原创样式加scoped后，会为元素增加data-v-xxx属性，因此样式优先级造成的线上样式与本地的不一致。[data-v-xx]属性的优先级

[data-v-xx]属性的优先级，vue项目样式加scoped后，会为元素增加data-v-xxx属性，因此样式优先级造成的线上样式与本地的不一致。

2022-06-17 11:44:12 1331 1

原创 npm上传自己的包，更新自己发布的包

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。前提：本文涉及的命令都是在要发布的包的根目录下执行的，在编辑器的终端或者cmd终端执行效果都是一样的。问题一：上传自己的包到npm1、注册npm账号，并且完成邮箱验证。已有的用户可以跳过这一步，点击npm进行注册2、进行包信息的初始化，输入npm init，根据提示输入对应的内容，此时，目录下会出现一个package.json文..

2022-05-23 16:54:02 2083 1

原创谷歌浏览器调试打包后的Vue代码（谷歌浏览器调试，Chome调试js代码找出元素绑定的click事件）

开发时经常遇到本地无法复现但测试环境硬是有问题的bug。这个时候如果能够通过谷歌浏览器的调试快速定位到问题就好了

2022-05-20 17:47:09 3026

原创 Vue项目，通过数组下标更改数组的值不生效，页面没有重新渲染

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。问题背景：今天在开发中遇到了一个需要，在列表里要通过按钮的点击控制手机号码列是显示正常的号码还是显示星号******。页面大致原型：id 手机号码操作 1 13400003333 显示手机号（按钮） 2 *********** 显示手机号（按钮）首先想到的实现方式就是给表格的每条数据增

2022-03-29 11:04:16 6921

原创使用canvas生成水印watermark，有详细注释，简单易懂

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。生成水印的js文件：// const watermark = {}// 定义设置水印的方法，const watermarkFun = () => { // 如果水印元素已经存在就先移走，重新生成, id要是全局独一无二的 const id = '3.14159261111' if (document.getEle..

2022-03-22 17:33:25 4818 1

原创 Vue项目在ie浏览器下空白（es6语法兼容问题）ansi-styles报错

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。分页组件的粗糙实现：❤️欢迎素质三连[点赞 + 收藏 + 评论]我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。...

2022-03-21 16:03:45 2257

原创正则表达式中的?=、?＜=

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。每次写看到这些正则表达式，都容易傻傻分不清，因此记录一下，加深记忆。1、?= 正向肯定预查举例：匹配'2020'或'2021'字符串并且'2020'或'2021'字符串后面的字符是'abc'let reg = /202[0-1](?=abc)/g;let str = '2020abc, 2021ddd';let res = s

2022-02-07 16:06:10 3726 1

原创 radioType: ‘all‘无效？zTree实现单选，整棵树都只能选一个

我们项目系统用zTree的版本是2.6，官网的已经是3.5了，查看官网的api文档，使用radioType: 'all'并不能实现整棵树单选。在此仅验证了2.6版本的使用，要实现单选且整个树都只能选一个，初始化tree的setting参数这么设置就行了。checkable : true,checkStyle : "radio",checkRadioType: 'all',checkRadioType: 'all'，表示单选应用于整个树，'level'表示单选应用于同一水平级别的选项，父子节

2021-12-23 17:06:04 843

原创 ElementUI日期组件el-date-picker设置不能跨年/跨月/跨周

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。直接上代码 <el-date-picker v-model="groupSearchTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-form

2021-12-21 18:17:44 4649 3

原创本地已有项目如何上传到github上

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。一、github上新建一个仓库具体步骤可以看网上的诸多教程二、把本地项目初始化为一个git仓库找到本地项目的根目录，依次执行1、建立本地的git仓库git init2、将本地文件全部添加到本地的git仓库git add .此处如果报下面这个错误，则需要先执行：git config --global ..

2021-11-26 18:22:11 674

原创 [Vue warn]: Error in render: “TypeError: data.reduce is not a function“报错详解

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。一、问题定位：打开开发者工具，点开错误的那个小三角，便能看到详细信息，定位到错误发生在哪个文件的哪一行。我的项目使用Element-UI组件进行开发，clDetailList是用于给el-table的data属性赋值的。clDetailList按照预期得是Array类型的，问题就出在push函数执行完之后返回的是数组的长度.

2021-10-29 15:14:41 4966

原创百度编辑器UEditor二次开发使用Grunt打包报错提示“arguments.callee“ cannot be used in strict mode

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。最近有个项目需要用到百度编辑器UEditor，官方文档写得一言难尽，居然还有错别字。一、遇到的问题进行二次开发--使用grunt打包源代码这一步遇到了问题。我使用的UEditor的源码版本是1.4.3，目前最新的版本是1.5.0。github上可以下载完整版的源码，下载地址：ueditor。在使用语句grunt --serve.

2021-10-15 10:52:04 425

原创 Vue开发工具dev-tools的安装与使用

为了避免要去官网下载源代码，进行编译打包，我将已经编译好可以直接使用的文件上传了，按照下面的步骤可以节省自己下载源代码，进行编译打包的时间。步骤一：下载我已经编译打包好的文件https://github.com/Redxym/dev-tools步骤二：解压文件，进入chrome目录步骤三：点击谷歌浏览器右上角的三个点-》更多工具-》扩展程序-》点击加载已解压的扩展程序，选择步骤二的chrome目录即可。至此，已经成功添加插件了，可以更方便开发Vue项目了...

2021-08-11 10:57:42 3980

原创 JS中数组的reduce方法使用总结

不知道大家有没有这种情况，每次要使用reduce方法时，总会想不起来这个方法该如何使用，都得先搜索一波reduce方法各个参数的含义与适用场景。一、语法：数组中的每个元素执行该回调函数，最终返回一个结果值。const arrMy = [1, 2, 3]arrMy.reduce(function(total, currentVal, currentIndex, arr){// todo 每个函数元素要执行的}, initVal)reduce的第一个参数：回调函数，必需，数组元素会执行

2021-08-10 10:55:24 1559

原创一文看懂JavaScript中的严格相等===、非严格相等、加法+等涉及的类型转换

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到过相同的疑惑，希望本文对你有帮助。写文背景：最近在看《你不知道的JavaScript(中卷)》，其中第一部分的第4章谈到了强制类型转换。作者写得很好，只是这知识它不入脑子啊，我看完就忘了作者讲了些啥，讲了太多的toNumber()，toString()，我全没记住！读完之后，脑袋里只剩下大大的疑惑，连x < y这种比较大小的都不会比较了。为了解决这个迷惑，打开了我下载回来

2021-07-06 16:43:57 266

原创再也不会分不清JS中的some、every、findIndex、find、forEach、map、filter方法了

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。在JS代码中，经常有对数组的各种操作，也就衍生了各种函数，而每次使用，我都傻傻分不清它们之前的区别，因此，特意把它们之前的区别做了个总结。callbackfn示例：const arr = [10, 20, 30]const callbackfn = function (value) { if (value > 18)

2021-07-02 17:49:52 624

原创 Windows 7系统安装IE11 提示在安装前需要更新

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。❤️欢迎素质三连[点赞 + 收藏 + 评论]我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。...

2021-06-08 11:47:14 10177

原创 CSS实现水平垂直居中的6种方式

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。在开发中经常需要实现的一个页面效果是：元素的垂直居中。在此记录一下，经常适用的几种方法前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中<style>.son { width: 200px; height: 200px; background-color: p

2021-05-11 14:54:32 36288 2

原创《你不知道的JavaScript》阅读疑惑之if块内的函数声明，if语句块内的函数，if语句外也可以访问

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。最近在看《你不知道的JavaScript》遇到一个下面的问题var b = true;console.log(typeof foo);if (b) { console.log(11, typeof foo); function foo() { console.log('b') } c

2021-05-07 20:53:16 811

原创 flex:1在IE与谷歌浏览器中效果不一样：在IE中文字被后面的的元素遮挡，变垂直，没有正常显示

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。遇到的问题：今天在适用flex布局时，遇到了flex:1;在谷歌和IE浏览器中显示不一样的问题。谷歌浏览器的效果与预期相符合。预期效果:IE浏览器的效果图：完整的页面代码：<!DOCTYPE html><html lang="en"><head> <meta cha

2021-04-20 17:38:38 1021

原创 Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。重现步骤如下：打开使用el-dialog编写的弹框点击浏览器的回退按钮现象：弹框的遮罩层没有关闭解决办法：根据官网文档可知，在弹框中添加如下代码即可解决:modal-append-to-body = "false"原因分析：官方文档的说明入下图Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。

2021-04-12 17:09:04 8114 11

原创实现iframe中子页面的弹框遮罩层遮盖父页面等整个页面

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。在维护一些项目时，时常会遇到使用iframe元素来实现页面的嵌套。子页面有弹框时，遮盖层往往只能遮住子页面所在的iframe窗口，不能遮住整个页面。想要实现最简单的子页面的弹框遮住整个页面只需要下面几个步骤：把遮罩层写在父页面中子页面点击按钮时，弹框显示，并且触发父页面的方法，将遮罩层显示点击子页面中的关闭弹框按钮，弹框关闭，并且调.

2021-03-02 15:34:23 6103 2

原创 if函数判定不正确？JS中返回false的情况

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。遇到的问题：开发中想根据test对象是否有type属性来进行不同的逻辑的操作，type=0时，原本是想要输出is true的，可实际结果却是输出的is false。百思不得其解，当时真的是没想到这一层，用if进行判断，会对type进行转换。’’、0、undefined、null、NaN等五种值都会被转换为false，因此实际输出与设想的结果.

2021-02-22 11:12:26 1937

原创 JS实现深拷贝（包括日期类型的和正则类型）

JS如何实现深拷贝背景知识：基本数据类型：undefined、null、number、boolean、string、symbol引用数据类型：object（数组、函数等都属于引用数据类型）常用的实现深拷贝的方法：1、使用JSON.stringifyconst arr = [ { a: new Date(), aa: new RegExp('\\w+'), aaa: function() { console.log('aaa function') } }, { b: 'qwe' }, {

2021-02-18 17:26:35 4680 1

原创 el-tree文本内容过长显示不出来，给el-tree加滚动条

使用elment-ui中的el-tree组件，让el-tree有滚动条首先在网上搜索了，说使用以下代码就能生效，然而，我使用不生效，打开开发者工具发现这些样式根本没有加上去.el-tree { .el-tree-node { display: inline-block; min-width: 100%; }}于是乎，分析想要出现滚动条的原理，也就是想要在el-tree直接子级元素下面的el-tree-node添加属性，因此改用下面的写法，成功解决问题。.el-tree > :n

2021-02-05 18:01:09 2288

原创 VUE项目开发，使用开发者工具查看源文件

如何在浏览器看到.vue文件的源文件问题描述：今天在开发的时候，想要通过断点的方式看一下代码究竟是咋运行的，打开Chrome浏览器，F12，在开发者工具中选择Soruces，Ctrl + P进行文件查找，找到之后，发现明显不是源文件，调试困难。解决办法：在vue.config.js目录中添加如下内容：configureWebpack: { devtool: 'source-map' },可以看到，已经是能够方便调试的源文件了。更多详情可以查看阮一峰老师对 devtool: 's

2021-01-25 17:55:00 4158

原创 Vue中@click事件无效？@click.native中.native的含义和使用

记录@click绑定事件的一个坑问题描述：今天开发的时候，给组件绑定了@click事件，但是事件却没有执行。代码如下：<template><div> <span>父组件页面</span> <search @click="onSubmit"></search></div></template><script>methods: { onSubmit() { alert('sh

2021-01-25 17:29:01 8825 1

原创想要div铺满全屏，设置height:100%却没有生效

为何height:100%无效读书笔记之《CSS世界》开发遇到的问题某小白想要在页面插入一个div，然后满屏显示背景图，就写了如下的CSS： div { width: 100%; /*这是多余滴*/ height: 100%; /*这是无效滴*/ background: url(bg.jpg); }然后他发现这个div的高度永远...

2020-01-14 10:26:42 7889 1

weixin_44370837的博客