weixin_42686022的博客

原创 vue 的老项目启动不了

2 时间久远的vue项目起不来，删除了原有package.lock.json 后再次安装node_modules，然后可以跑起来了。1 Node 包安装完后项目跑不起来，原因缺乏npm依赖包，安装外层目录node_modules后解决。某些vue项目由于年代久远安装node_modules之后 npm run dev 无法启动报错。

原创 微信h5页面设置分享注意问题

5 微信公众号需配置当前页面的域名，否则分享图片不显示。3 分享图片需是https链接，页面HTTPS链接。4 图片20k以内较好。1获取签名ID等参数。2微信sdk设置分享。

原创 windows 系统使用nvm安装某些版本的node时 npm没有安装上

解决方法： 另外下载一个对应版本的node 的zip压缩包， 解压后可以整体替换nvm目录下对应版本的node文件夹中的文件（主要是node_modules下的npm 和 node.exe同级别目录下的npm文件）安装某个版本的node时 node自带的npm包管理器提示下载失败，导致无法安装。之后使用nvm切换到对应版本的node即可。

原创 vscode vue项目自动格式化

vscode 常用插件 liveserver eslint prettier gitlens vetur(适用于vue2的vue文件样式) chinese(simplify) 用于编辑器汉化。2 项目根目录下方需要有对应插件的配置文件 .prettierrc + eslint.js 用于配置具体的格式和eslint规则。1 vue项目配置自动格式化 需要的插件 prettier + eslint。

原创 canvas游戏开发框架的几点

1 点击时使用canvas离屏绘制，将不同的绘制对象绘制成不同的颜色，然后使用canvas获取点击点像素的颜色.点击点的颜色就是点击对象的颜色，缺点是，（1）如果将某个图像转化为纯色绘制计算量会较大， （2）离屏绘制各个图时，如果绘制的元素较多计算量会较大。即可以使用逆时针移动的四个格子的区域来判断，移动过程中被圈定的像素就是边界像素[[x,y],[x1,y1],[x2,y2],,,]， 参考文章：然后提取其中的部分点作为绘制多边形的顶点，即可抽象出图象的父多边形.（pixijs的检测方式）

原创 Javascript 数组内置方法

实例方法：at()实例方法：concat()实例方法：copyWithin()

原创 javascript设计模式(2)

是用小的子对象来构建更大的 对象，而这些小的子对象本身也许是由更小 的“孙对象”构成的。

原创 javascript 设计模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点, 比如 webpack打包的模块, 在多个文件多次引用某个文件的情况下只打包一次该文件.

原创 Set和Map数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

原创 前端学习分享-前端动画

说明文档:https://www.runoob.com/cssref/css3-pr-transition.html可以通过自定义平滑曲线.贝塞尔曲线生成https://cubic-bezier.com/#0,.76,1,.06Transition 动画事件:说明文档:https://www.runoob.com/cssref/css3-pr-animation.htmlanimation-fill-mode 针对动画过程的开始之前和结束之后进行显示填充;animation-fill-mode: n

原创 css样式 之 display: flex 整理

display: flex 父容器 dispaly:grid / inline-grid 声明grid网格布局 * grid-template-columns: auto 100px 1fr 定义网格列( min-content max-content repeat ... 等等一系列设置 ) 无法确定列数时可用 repeat(auto-fill, 100px) 自动repeat 宽度为100px grid-template-columns: fit-content

原创 H5活动页开发

demo链接: https://n.sigmob.cn/mraid/100099/ringtoss_v3/index.html。

原创 双向虚拟滚动列表(vue3版)

(2-2) 动画控制: 根据当前第一项数据的top或left设置动画的位置。(2-1) 数据显示: 根据scrollTop确定显示数据起止位置。(3) 可基于双向虚拟滚动实现双向虚拟滚动的table组件,及其他组件。(2-1) 列表项加载后更新数据表为实际高度or宽度。​​虚拟滚动解决了列表组件dom过多可能产生的卡顿问题。1 构建一个记录列表元素宽高及位置的列表。(1-1) 初始化预估高度。2 以记录数据为中心模拟滚动过程。(1) 垂直方向虚拟滚动列表。(2) 水平方向虚拟滚动列表。

原创 文本超出时显示...,显示tooltip的vue组件

​​web前端,有时需要控制某个显示区域显示内容超出时显示...同时展示tooltip, 但是这个位置的内容在文本少时不需要展示tooltip和…,这个组件实现这个功能。

原创 display:grid 内容整理记录

原创 React全家桶包括以下技术

以上技术组件通常结合使用，以构建功能强大的React应用程序。

原创 html布局问题实践

实现如上图效果 1. 文案超出时显示... 2 左侧容器的文案和?在左侧容器居中显示 3 数字部分在右侧。

原创 css选择器优先级计算

C的值等于类选择器（.class）和属性选择器（a[href="https://www.baidu.com"]）和伪类选择器（:first-child）出现的总次数。D的值等于标签选择器（div,span,a） 和伪元素选择器（::before,::after）出现的总次数。::first-letter ：用于选取指定选择器的首字母。::before : 选择器在被选元素的内容前面插入内容。::after : 选择器在被选元素的内容后面插入内容。::first-line ：选取指定选择器的首行。

原创 css 学习

2 . word-break:break-all 与 word-wrap: break-word.revert (还原)重置属性为用户代理样式表中的值，如果未定义则行为类似于 initial。中把word-wrap改名为overflow-wrap。initial 重置属性为默认值，不考虑继承规则。unset 重置属性为默认值，但考虑继承规则。共同点是都能把长单词强行断句，不同点是。1 css属性初始值。

原创 sourceTree 未使用husky 触发git pre-commit 的eslint校验

ps： 我在再次执行commit 还是报错，提示node版本不符合要求，支持node12以上，而我的node版本是10XX，此时升级node版本即可。在项目文件夹到的根目录下新建~/.huskyrc 文件（注意mac中.开头的文件被隐藏，查看隐藏文件 command + shift + .）原文链接：https://blog.csdn.net/qq_32530601/article/details/123416659。node有一个专门管理node.js版本的包叫作：n；重新运行commit。