- 博客(242)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 欢迎指正不足之处
最后，博客主要来记录踩坑点，个人小小看法：建议首先从官网、经典书籍入手的，少看碎片化的文章来学习，先系统看官方的教程，再去逛掘金、GitHub、简书等等知名的论坛网站（关键你要会选出你能看懂的，你能够接受的，怕喷子打我，哈哈哈哈哈）来学习更合适，最后坚持学习，虚心学习，不要膨胀。...
2020-01-15 17:21:33
859
原创 【vue-infinite-scroll滚动多次】
参考：element需要在每一次异步加载的开始时禁用这个滚动加载，等异步加载完再打开。否则默认是一直滚动就自动提前触发好几次。
2022-04-22 17:05:31
2881
原创 VUE中eslint报错： Expected linebreaks to be ‘LF‘ but found ‘CRLF
出现这个的原因：windows 环境下， git 在我们 pull 代码的时候，会自动识别当前的系统环境。将原本的（linux/unix）换行改成对应系统的，在我们提交代码的时候又会转成远程系统环境的（Linux/unix）,然后又装了 eslint，默认就是使用 LF，所以就会报这个错误各种环境下换行符格式window：CRLF(\r\n 或者^M\n)mac: CR(\r 或^M)linux/unix: LF(\n)解决方式：1. 在 vscode 的文件代码底部的 CRLF 手动切成 LF
2021-12-29 19:00:18
4816
2
原创 vue history模式，刷新页面404？结合nginx配置路由
环境：vue2怎么配置打包路径打包上去之后是一个被压缩的文件，怎么解压放到指定的文件中静态资源路径访问错误vue history模式，刷新页面404？结合nginx配置路由由于spa应用，在history模式下，路由的变更是前端的浏览器 history.pushState、replaceState进行监听切换的，我们只配置了首页的路由，当访问的时候，能够访问过去，也可以切到其他的路由，但是进到其他的路由进行刷新的时候，出现了404。 这是因为我们刷新了当前页面（访问页面相当与发起一
2021-12-26 23:38:08
2314
原创 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
出现这个的原因：重复跳转路由，场景：当下路由是/home，反复点击跳转到/home。解决方式： 跳转前进行判断是否同一个路由，不同则跳转，相同则不跳转。
2021-12-26 23:06:08
251
原创 less的使用
less的使用安装less的特点变量Mixins嵌套运算注释Importing导入作用域（Scope）函数命名空间和访问符映射安装这里是全局安装less，在node环境中运行，cnpm install -g lessless的特点less只是预处理器，它并不能直接在浏览器中运行，浏览器只能执行.css文件，也就意味着，项目中我们使用less的时候，是需要使用对应的loader（less-loader）转成css才能够在浏览器中运行的。下面通过编写less，并在nodejs环境转化成css理解一
2021-09-23 13:50:20
570
原创 不规则多维数组转成一维数组
输入：[2, [2, 8, 34343, 2, [3, 2, 78]], [1, 2]]输出：[ 2, 2, 8, 34343, 2, 3, 2, 78, 1, 2 ]function dealData (arr) { if (Object.prototype.toString.call(arr) !== '[object Array]') { return; } return `${arr}`.split(',').map(Number);}let arr = [2, [2,
2021-07-15 18:27:23
158
原创 css画个正方形
css画个正方形方式1方式2html效果参考方式1/* 兼容性好 */.use-transform { width: 10%; height: 0; padding-bottom: 10%; border: 1px solid #000;}方式2使用 vw: 为什么不用%？ % 是相对于父元素的大小设定的比率，body默认的宽度为视窗的宽度，没有内容时高度为0，而vw、vh 是视窗大小决定的，不取决于内容。vw、vh 优势在于能够直接获取高度，而用 % 在没有设
2021-07-02 14:56:43
1062
原创 clipboard复制粘贴封装
clipboard复制粘贴封装使用场景涉及的主要技术使用组件里单独引入更高级的使用方式1：封装成独立的工具库方式2：全局自定义指令使用场景项目中有点击复制文本的功能涉及的主要技术vue-directiveelementclipboard使用cnpm install clipboard --save or yarn add clipboard --save组件里单独引入<!-- Target --><input id="foo" v-model="name" /&
2021-07-01 15:25:07
520
原创 h5压缩图片并上传到oss
需求背景：h5上传图片到oss，并返回图片的链接参考资料：阿里云ossmultipartUpload api图片纯前端JS压缩的实现注意：以下不包括业务代码，纯个人处理的oss上传封装，替换成自己的临时凭证的接口即可使用const OSS = require('ali-oss');/** * * @param {图片base64位地址} url * @returns */const loadImage = function (url) { return new Promise((
2021-06-23 10:45:05
758
1
原创 vant上拉加载、下拉刷新
<!-- * @Descripttion: 上拉加载、下拉刷新 参考：https://youzan.github.io/vant/#/zh-CN/list * @version: * @Author: peri.lu * @Date: 2021-06-01 * @LastEditors: peri.lu * @LastEditTime: 2021-06-01--><template> <div class="shop-list-all"> &l
2021-06-01 12:23:10
292
1
原创 ‘geolocation‘ in navigator 失效
原因：该操作是异步，解决方式：navigator.permissions.query({ name: "geolocation" }).then((res) => { // granted：成功 denied：失败 if (res.state === "granted") { }});
2021-05-13 17:11:22
586
原创 Please verify that the package.json has a valid “main“entry
主要原因：less-loader的版本太高了，太高的话,webpack也要升级匹配，可以进行降级处理，如安装以下版本： "less": "^4.0.0", "less-loader": "7.3.0",
2021-04-15 23:34:05
5598
原创 Cannot read property ‘tapPromise‘ of undefined
主要原因：版本太高了，降低一个版本：compression-webpack-plugin所有版本
2021-04-02 10:35:14
549
原创 vue项目中配置eslint+prettier+stylelint
背景多人协作开发时，统一的代码风格会提高代码可阅读性、可维护性，提高开发、迭代的效率。减少以下几点问题的出现：低级错误：如重复定义同名对象的属性（由于默认代码不会报错，代码量多时，自检也会看不见）代码格式不统一重复覆盖频率高：迭代需求修改的可能仅仅几行代码，但查看代码修改记录，有大部分都是格式冲突，一直重复覆盖其他人的代码格式，开发体验不太友好，应少数服从多数，遵循业界普遍规律，切勿特立独行。代码冗余：不需要的组件、方法、变量、图片，特殊原因保留时应给予注释说明，否则应该及时删除。隐藏bug：有
2021-03-31 19:12:24
1301
原创 vue的一些常见面试题
我的面试也告了一个段落，总结一下我面试的心得：机会一定是留给准备的人的。计算机行业，并不是你要求职的时候，才去做相应的准备和突击应付，实干和踏实应该是要具备的。相关的技术知识应该渗透到平时的工作中，应知应会。有自己的方向和目标，不用很大的目标，小小的目标...
2021-03-29 10:35:33
145
原创 vue的$router和$route的区别
$router路由器，是vue-router的一个实例对象，包含单页面应用整个路由器的信息（options）、当前的路由信息（currentRoute）、路由跳转方式（back、go、push、replace、forward）、全局导航守卫信息（beforeEach、beforeResolve）等， 详细参数信息router-实例属性创建const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component:
2021-02-22 23:37:12
228
原创 react中state和props的区别
state用来存储组件内部的数据状态需要通过setState进行修改，而setState是异步的，需要立即获取最新的状态时使用第二个参数（回调函数），代表更新state完成。如果懒得每一次都是用回调函数，也可以使用promise+async+await进行封装，用同步的思想写异步操作。this.setState({age:12},()=>{console.log(this.state.age);//=>12})只能在构造器constructor中进行初始化只存在于有状态组件中
2021-02-22 00:48:25
421
原创 reduce的用法
概念数组的一个方法，使用reduce可以针对数组处理很多比较复杂、抽象的操作，更简化逻辑，一步到位。语法array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)；1.accumulator 必需。初始值, 或者计算结束后的返回值。2.currentValue 必需。当前元素3.currentIndex 可选。当前元素的索引4.array可选。当前元素所属的数组对象。5.initi
2021-01-26 23:08:34
1004
1
原创 等分截取字符串
/** * 等分截取字符串，输入：splitWords('12345',2) 输出 ['12','34',5] * @param {string} str * @param {number} num */export function splitWords(str, num) { if ( Object.prototype.toString.call(str) !== '[object String]' && Object.prototype
2020-12-25 15:09:11
218
原创 一道题你能够看出来多少知识点
这道题考了原型链、作用域、变量提升，函数声明与函数表达式、this指向等function Foo() { getName = function () { console.log(1); }; return this;}Foo.getName = function () { console.log(2);};Foo.prototype.getName = function () { console.log(3);};getName = fu
2020-12-08 22:53:29
148
原创 vue/cli4.2.3打包的一些优化配置
前端开发完项目之后，会进行打包，就会涉及到性能优化的问题，想要进行性能优化，首先要知道哪里可以进行优化，可以借助工具帮助分析文件哪里可以进行优化：可视化分析包大小# NPM npm install --save-dev webpack-bundle-analyzer# Yarn yarn add -D webpack-bundle-analyzer在vue.config.js中配置：module.exports = { chainWebpack: config =>..
2020-11-06 12:05:53
2231
原创 几道基础机考题
原生html、JavaScript、css实现表格（考察JavaScript基本操作），如下图：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&.
2020-10-11 18:55:28
158
1
原创 ios中获取不到音频的时间，一直是NAN
duration 属性：返回当前音频/视频的长度，以秒计。如果未设置音频/视频，则返回 NaN (Not-a-Number)。场景： 需要获取音频的时间，Android环境正常，ios有些机子正常，有些不行。排查发现，ios上没等音频load出来就去读取了，做兼容处理，监听音频加载完后再去读取时长。let audioDom = document.getElementById(audioId), duration;audioDom.addEventListener('canplay', ().
2020-09-10 21:58:14
1141
原创 我经常会用到的DOM操作
增加、创建、修改document.createElement(nodename) ：创建一个新的标签节点document.createTextNode(text)： 创建新的文本内容node.appendChild(node)：向一个节点尾部插入一个新的节点node.insertBefore(newnode,existingnode)：向一个节点首部插入一个新的节点document.createAttribute(attributename)删除parentNode.removeChil
2020-09-07 14:19:41
198
原创 分享一些我平时会用的网站和软件
目前常用的，有一些没想起来，想起来了继续补充：前端面试之道：http://caibaojian.com/interview-map/frontend/力扣刷题：https://leetcode-cn.com牛客：https://www.nowcoder.com掘金：https://juejin.im脚本之家：https://www.jb51.net熊猫压缩：https://tinypng.com思维导图：https://www.processon.com思否：https://segment
2020-09-03 22:50:05
203
原创 CSS画0.5px的线
i { display: inline-block; width: 170px; height: 1px; background: #ff9db5; transform: scaleY(0.5); }如下图：
2020-09-03 16:46:18
760
原创 如何进行代码重构?
作为一个程序员，大部分时候，如果不是一个人承包整个项目，那么有1/3的时间在写代码，1/3的时间在看别人写的代码，剩下的1/3的时间在摸鱼。那么如何提高摸鱼的时间？看别人写代码十分头疼，分分钟想骂人，自己却又写得龙飞凤舞，接下来，来看看如何进行代码重构，来提升一下自己的大神气质。提炼函数程序猿大部分时间都在与函数打交道，我们都希望看到前前前同事写的函数代码具有这样特点：良好的命名：比如用户登录，写成ada(){}如果不写注释，还需要去看代码到底封装了神马东西，是不是想骂gou？写成userLo
2020-08-12 22:16:15
1170
原创 git撤销远程的提交记录
回滚远程分支的修改，采用master的git co origin/master +path重新提交一次git add .git coomit -m "回滚"git push origin feature-xxx
2020-07-31 18:51:19
893
原创 JavaScript的执行机制
async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}console.log('script start');setTimeout(function () { console.log('setTimeout1');},
2020-07-05 16:52:55
192
原创 (10).add(10).subscribe(2).add(10)
题目 ： 实现(10).add(10).subscribe(2).add(10)，输出28提示： add是加法 subscribe代表减法console.log((10).add(10).subscribe(2).add(10)); //=>28考点：原型链JavaScript的Number对象方法valueOfNumber.prototype.add = function (a) { let value = this.valueOf() // valueOf返回一个 Numbe
2020-07-02 01:19:46
453
原创 this、call和apply
thisJavaScript的this总是指向一个对象，具体指向哪一个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。我们需要判断到底this.key,到底输出哪一个值，就需要明白this指向哪里.this指向，分为四种1. 作为对象的方法使用：作为对象的方法被调用时，this指向该对象let obj = { a: 1, getA: function () { console.log(this.a); }};obj.getA
2020-06-21 17:11:19
247
原创 使用JavaScript实现一个new
JavaScript的函数既可以作为普通函数被调用，也可以作为构造函数被调用。我们使用new运算符来调用函数时，此时的函数就是一个构造器。使用new运算符来创建对象的过程：实际上就是先去克隆Object.prototype对象,再进行一些其他额外操作的过程。首先：创建一个普通函数(使用它来当做构造函数)function person(name) { this.name = name;}2.在它的原型上创建一个方法person.prototype.getName = func.
2020-06-21 12:08:52
341
2
原创 webpack配置postcss-loader和autoprefixer不生效
postcss.config.jsmodule.exports = { plugins: [require('autoprefixer')],}webpack.config.js module: { rules: [ //css-loader解析 @import 这种语法 // style-loader 把css插入到head标签中 // loader的顺序，默认是从右向左执行 从下到上执行 // 格式：[] / [{loader:''}
2020-06-21 11:00:22
5114
1
原创 sourcetree
我有时候下载半天 -_-!!!写完代码，本地想要查看到底修改了什么修改的比较少的话git diffsourcetree（推荐）链接：sourcetree提取码：rons
2020-05-29 16:01:54
225
原创 remote: HTTP Basic: Access denied
这是我输入的密码或者账号错了，被拒绝了，可以删掉对应的用户凭证，接着再次clone，就重新弹出验证身份的弹窗：
2020-05-26 21:13:53
253
原创 css的回流和重绘
浏览器的的渲染过程1.将 HTML 文档解析成 DOM 树2.将 CSS 解析成 CSS 规则树3.将 DOM 树和 CSSOM 合并为 Rendering Tree（渲染树）4.计算元素位置5.遍历 render 树 进行绘制页面回流（重排）：页面中的某个部分发生了改变并且影响了布局，需要重新排页面结构重绘：仅仅样式变化，不会引起页面结构变化，如改变字体颜色、边框颜色、背景颜色等可以想象成搭积木，如果我们抽离其中的一块木块或者把添加一块木块，那么原来的结构会发生改变了，这时..
2020-05-25 23:05:13
261
原创 vue-路由
背景：vue中如果想从一个页面到达另一个页面，可以使用路由来实现。官方文档-vue-router以下都是个人看文档和结合实际开发时用到的理解：路由主要为我们实现以下功能：嵌套的路由/视图表：如：app.vue<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | .
2020-05-24 23:14:41
265
原创 如果你遇到这样的数据结构，你会怎么处理？
午休时间，我朋友发给我这样的数据，问我怎么处理：[ { test1: 86, test2: 75, test3: 89, time: '2019-01-13', name: 'lisa', }, { test1: 8, test2: 6, test3: 99, time: '2020-02-12', name: 'jennie' }, { test1: 11, test2: 22,
2020-05-21 14:52:26
268
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人