- 博客(68)
- 收藏
- 关注
RSS订阅原创 yarn安装私有依赖包，报错unexpected end of file问题
yarn安装私有依赖包，部署报错unexpected end of file问题，重新拉取依赖失败
2022-10-28 00:28:41
1446
原创 疑难Bug记录：Network与console及debugger的结果不同
疑难Bug记录：Network与console及debugger的结果不同
2022-06-16 12:48:32
579
原创 Chrome浏览器访问页面报错 NET:ERR_CERT_AUTHORITY_INVALID 和 跨域问题解决
chrome浏览器访问页面证书无效和跨域问题解决方案
2022-06-09 13:33:25
2060
原创 vuex实现数据持久化
Vue项目中使用Vuex作为状态管理，其本质上类似于全局的变量存储，方便在所有Vue组件中共享数据，而且也可以动态改变状态。Vuex是单向数据流，实现了双向数据绑定。在单页应用中Vue项目集成Vuex足够基本使用，但是刷新页面的时候数据都会被清空，在某些情况下，我们需要这些状态能保存下来，比如登录后的用户信息、AccessToken、主题配置等。持久化原理：结合本地存储做到数据状态持久化，使页面刷新后数据不会初始化为默认状态。1、安装插件 vuex-persistedstatenp
2022-05-06 14:32:35
8705
2
原创 浏览器缓存
【前言】## 数据的缓存数据 既可以在 浏览器（客户端）本地存储，也可以在 服务器端存储，浏览器端（客户端） 可以保存一些数据，需要的时候直接从本地获取。 服务器端 可以保存所有用户的数据，但需要的时候浏览器要向服务器请求数据。## Web缓存从微观上可以分为以下几类：浏览器缓存 （每个浏览器都实现了HTTP缓存，当我们通过浏览器使用HTTP协议与服务器交互时，浏览器就会根据一套与服务器约定好的规则进行缓存工作） 数据库缓存 （当web应用关系复杂，数据表剧增时，可以将查询后的数据
2022-03-07 14:59:28
2205
原创 浏览器本地存储
总结：浏览器本地存储分为 ——cookie Web Storage （localStorage、sessionStorage） indexedDB【tips】WebSQL属于关系型数据库，目前未列入html标准中，只有chrome、Safari等部分webkit浏览器支持，其他浏览器均不支持，IE11仅部分支持IndexedDB数据库。（1）cookie## 会话（Session）跟踪：会话，指用户登录网站后的一系列动作，比如浏览商品添加到购物车并购买。会话跟踪是Web程序中常用的技术
2022-03-07 14:29:59
1718
原创 手把手教你使用vite简单搭建ts+vue3全家桶
一、vite环境搭建，构建vite-vue-ts项目1、安装vite环境npm init @vitejs/app或者yarn create @vitejs/app2、使用vite初始化vite+vue+ts的项目npm init @vitejs/app app-name或者yarn create @vitejs/app app-name3、选择项目类型为vue+ts（小tips:git bash中直接按上下键切换选择自己想要的选项，虽然界面中不会动态展示切
2021-10-20 18:01:47
17626
6
原创 移动端H5项目开发遇到的问题
第一类：架构问题（1）移动端H5项目可能涉及到微应用等的项目上传的大小限制，视情而定选择较小的依赖包，做好代码压缩混淆，图片处理，用打包工具处理掉依赖包中不需要的代码等。第二类：兼容性问题（1）不同手机屏幕的px值可能会出现小数，我们在需要用到相关数据时可以进行取整处理。（2）要考虑手机顶部的不同刘海进行设计。------------------------------------------ 持续更新 --------------------------------------
2021-10-20 11:45:15
303
原创 vue中使用quill富文本编辑器及其拓展插件
一、安装 quill 及其插件npm install quill quill-image-drop-module quill-image-resize-module -S二、在页面中使用 quill 及其插件：quill-image-drop-module、quill-image-resize-module//myQuill.vue<div id="quillEditor"></div>------------------------------------
2021-01-27 10:52:55
2001
原创 vue项目中修改项目源码（echarts为例）
找到node_module中的echarts，程序在引用包时一般是从包的index.js进入，所以我们找到index.js：在index.js中看到引用了很多文件，我们根据自身需求去进行修改即可。如我想添加一个charts的公用函数：找到了公用方法的路径，进入修改：添加了一个我自定义的方法：如此，就可以在项目中使用这个方法：......
2020-12-17 11:40:12
1894
原创 创建项目时容易出现的问题
1、包版本问题导致的错误（如引用包出现语法更新等）；2、文件后缀的缺失（如js和vue文件同时存在于一个文件夹下时无后缀名引用报错）；3、CMD规范和ES Module规范的混用；
2020-12-10 17:09:08
254
原创 mouseleave在多次鼠标点击下被错误触发的避免办法
项目中遇到个问题：在监听鼠标移入移出事件时有时会因为鼠标在移入的元素中进行了点击就自行触发了鼠标移出事件，很不得解。打印出event对象发现，因为多次点击触发的mouseleave事件和正常触发的mouseenter事件有一个区别：其relatedTarget属性（ie中是toElement）值不同。多次点击触发的鼠标移出事件的这一属性值为null；正常触发的则会是鼠标移出元素后所悬浮于上的DOM对象；以上~待深究……...
2020-11-19 18:26:06
567
原创 css不常用但很有用的属性记录
一、radial-gradient<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>#grad1:after { content: radial-gradient(closest-corner at 35% 35%, white 10%, pink 70%); displa
2020-08-31 14:38:00
167
1
原创 vue项目开发遇到的问题记录和细节list
1、this.$set(); 设置数组对象的值；2、子组件调用父组件函数：this.$parent.func();3、在一个页面中的window上绑定scroll事件，路由跳转后该事件还在，需要在绑定事件页面的生命钩子destroyed上解绑事件；4、vue-router的生命钩子、重定向；5、$ref的使用；...
2020-08-27 09:38:34
159
原创 css/less 样式开发遇到的问题
一、vue修改elementUI的样式无效解决：1、深度作用选择器（ >>> ）2、/deep/ 预处理器less下使用二、li :hover无效解决：:hover与前面的元素之间不要有空格！
2020-08-14 10:22:02
460
原创 JavaScript中的词法作用域（也叫 静态作用域）、动态作用域、函数作用域和块级作用域
静态作用域：一段代码，在它执行之前就已经确定了它的作用域，简单来说就是在执行之前就确定了其可以应用哪些地方的作用域（意指：该作用域下的变量）。以下例子为《JavaScript权威指南》中经典的一个例子：例一：var scope = "global scope";function checkScope() { var scope = "local scope"; function fn() { return scope; } return fn();}checkSc
2020-07-30 22:43:01
471
原创 箭头函数&普通函数 区别
区别：箭头函数采用词法作用域1、相比普通函数更简洁的语法2、没有this，而是捕获其所在上下文的 this 值，作为自己的 this 值普通函数：每个新定义的函数都有其自己的 this 值。3、不能使用new箭头函数作为匿名函数,是不能作为构造函数的,不能使用new。4、箭头函数没有原型属性var a = ()=>{ return 1;}function b(){ return 2;}console.log(a.prototype);//un.
2020-07-30 21:50:02
1106
原创 在严格模式下不推荐使用callee、caller的原因
callee我们知道，在递归函数中可以通过arguments.callee来实现解除函数体内代码与函数名的耦合状态，但是这种方法会导致函数体内的this指向的对象被修改；var global = this;var sillyFunction = function (recursed) { if (!recursed) { return arguments.callee(true); } if (this !== global) { console.log(
2020-06-13 16:13:46
1592
原创 详解js单线程及异步原理&js事件循环机制
Ques：什么是js单线程？进程是 cpu 资源分配的最小单位（是能拥有资源和独立运行的最小单位） 线程是 cpu 调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）【提示】不同进程之间也可以通信，不过代价较大 单线程与多线程，一般都是指在一个进程内的单和多。（所以核心还是得属于一个进程才行）JavaScript 语言的一大特点就是单线程，其在同一个时间内只能做一件事。JavaScript 的单线程，与它的用途有关。作为浏览器脚本语言，JavaScri
2020-06-10 17:54:44
1233
1
原创 webpack打包css一直报错
各种修改webpack和loader的版本都不对；最后看到自己文件里打印的npm-debug.log，提示您是否确认nodejs已更新到最新版本。。。然后~~~编译成功了。。。我一口老血差点没吐出来！以后不要只信度娘，还得注意看看代码报错的提示啊，学好英语很重要，嗯！...
2020-05-31 20:14:59
469
原创 webpack-dev-server的配置和使用——热更新、热替换、proxy代理
一、介绍虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到hot replace，即每次webpack编译之后，你还需要手动刷新浏览器。webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使...
2020-05-31 15:50:40
9270
原创 react+webpack+es6项目框架搭建
一、创建项目二、npm初始化在新项目下npm init，产生一个package.json三、全局安装webpack和webpack-cli第一次运行npm install XXX 会生成一个node_modules的文件夹；安装webpack-cli 会生成package-lock.json文件；四、添加webpack配置文件和入口文件等 并编写最简单的webpack配置文件；//webpack.config.jsconst ...
2020-05-31 15:01:01
316
原创 gitee使用记录
gitee使用记录1、创建一个仓库myStore（即项目）（选择了开发语言和“.gitignore”文件模板[用于告诉Git哪些文件不需要添加到版本管理中]）创建成功后：.gitgnore 内容：.vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json.gitgnore资料参考：https://www.jian...
2020-05-29 10:10:51
5221
原创 iframe中的@media使用注意事项
iframe中@media设置max-width和min-width时，获取的宽度不是实际浏览器窗口的宽度，而是iframe标签内的文档宽度；且@media一次设置的min-width和max-width只能是一个连续的范围：正确的分界：（1） 0 — 1200；（2） 1201 — 1400；（3） 1401 — 无穷；错误的分界：（1） 0 — 1200 和 1401 — 无穷；（2） 1201 — 1400；如下正确：...
2020-05-21 13:56:09
1437
转载 Chrome调试Tips
从左至右依次是：（等号）pause script execution–>下一个断点（半弧箭头）step 快捷键：F9–>下一行（下箭头）step into 快捷键：F11 全称：step into next function call–>下一行，遇到子函数就进去继续（上箭头）step over 快捷键：F10 全称：step over next function call–>下一行，如果已经在函数内部，则不再进入子函数内部，在外部则，进入函数。（右箭头）step .
2020-05-19 18:39:30
222
原创 jquery使用记录（随手记录）
1、trigger() 不能触发hover事件 ——但可以触发mouseenter/mouseleave/mouseover/mouseout事件来代替猜想：使用trigger()来触发hover事件，没有办法判断是鼠标的移入还是移出的，所以jq没有触发hover事件的写法。...
2020-05-19 14:09:36
133
原创 微信小程序开发中的细节（小心坑）
1、条件渲染2、datasetwxml中eg： <view data-courseid="{{courseItem.id}}" bindtap="getId"></view>js中：getId:function(e){ var courseId = e.currentTarget.dataset.courseid;}不能有大写(大...
2020-01-14 17:03:48
274
原创 前端开发——从px到rem再到rpx的知识点简介和总结
一、px (pixel)物理像素： 设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。逻辑像素： 也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。...
2020-01-14 16:43:23
999
原创 input去除默认值和下拉提示框
一、去input除默认值：<input type="text" id="inputId" name="inputName" onfocus="if (value==defaultValue)value=''" onblur="if(!value)value=defaultValue" />二、去除input下拉提示框<form autocomplete="...
2020-01-13 15:14:11
2320
1
原创 iframe页面中获取父页面元素的办法
var parentWin = window.parent;var $parentDoc = $(parentWin.document);$parentDoc.find('.classname');以上：记录。。。
2019-10-29 09:47:45
1114
转载 chrome浏览器调试js，结果Sources里面找不到js文件解决办法
页面出现问题，就debug，这是前端开发工程师最常见的做法，但是有时候，我们打开开发者工具，在sources查找js文件，却发现怎么也找不到，无法设置断点。但是文件在network选项卡里确实load过了。解决办法：第一种办法：给需要调试的js文件头部加上这么一句://# sourceURL=dynamicScript.js这一句像一个注释，但是确实能起到作用。我们在开发者...
2019-03-14 15:28:22
5749
原创 github上传本地项目
1、首先创建一个新项目，编辑项目名称和项目描述2、进入如下页面此时我用vue-cli先创建好了一个项目 —— myWeb3、通过webstorm打开项目在命令行中进行操作，或者使用git bash，进行以下操作：【1】首先初始化git，建立一个本地仓库：【2】新装的git需要提交用户邮箱和用户名：【3】添加远程地址：【4】添加整个项目到暂存区，并...
2018-11-20 16:22:08
172
原创 js代码导致网页崩溃延伸——如何高效操作DOM元素？
最近的项目成果发现总是会在一段时间后崩溃，定位到原因，是一个定时器那块。起初以为是定时器导致页面崩溃，后来发现是定时器中大量的dom操作导致的页面崩溃。总结心得：在进行页面编写时，应该尽量避免大规模的dom操作，尽量少地小规模地更改dom结构。以上，我认为我需要深入了解一下dom操作频率与页面性能的联系。后续应进行仔细的研究~~~...
2018-11-19 19:46:57
7568
原创 react + react-router4 + redux +webpack 框架搭建(使用CRA)
最近打算用react来开启一个新项目项目目录如下：（待更）框架搭建步骤如下：1、使用create-react-app生成项目； 2、npm run eject 暴露项目的配置，从而自由配置项目所需依赖； 3、添加less less-loader(1) npm install less less-loader --save-dev(2) 修改 config...
2018-11-12 17:41:54
668
原创 chrome 新特性 —— 不允许视频或音频在页面加载完成时自动播放
问题描述：为避免用户在打开页面时突然出现视频自动播放而出现声音吓到用户，chrome浏览器从2018年开始不再支持单独autoplay实现加载页面视频自动播放，解决办法：同时使用muted静音视频，以此实现静音情况下加载页面，视频自动播放。<video src="XXX.mp4" muted autoplay></video>...
2018-09-04 14:43:50
3999
原创 console.log引发的360浏览器兼容模式的冲突问题
最近的工作项目中，出现了js不执行的问题，但是打开控制台后js就执行了。。。真的是个很奇葩的问题，经过一步一步的排查发现，竟然是因为ie内核对console.log的不兼容问题。。。于是添加一下代码。。。window.console = window.console || (function () { var c ={}; c.log = c.warn = c.debug = c.i...
2018-06-04 16:48:05
1459
1
原创 elementUI使用中遇到的坑
1、通过el-upload获取到的文件file是封装后的，其中与普通input type=file 中获取到的文件是elementUI中的file.raw;如果在读取文件时直接使用elementUI的file会报错：Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of ‘Blob’...
2018-05-15 11:08:19
10981
2
转载 茅塞顿开系列——src 、href的区别
src和href之间存在区别，能混淆使用。src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。<script src ="js.js"></script>当浏览器解析到...
2018-04-23 16:08:55
160
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人