我的目标在远方
在用Vue开发项目时，有时候希望Vue的响应式系统能忽略掉一些特定对象，特别是一些数据量比较大的对象，比如地图实例，如果变成响应式对象会极大地降低地图的性能。经测试发现会降低70%甚至更多。
自己一个人开发还好，只要注意不赋值给响应式变量（data选项中定义的变量）即可，但多人合作时，难免每个人任何时候都不出错，一旦一个地方没注意，整个地图实例都会被改为响应式对象。
以前也查过资料、看过源码，都没有在Vue2中找到比较好的方法来处理这个屏蔽响应式的问题。（Vue3中通过 markRaw 或者 shallowReactive、shallowRef 来处理对象即可。）
最近因为开发一个公共的地图工具，而工具使用方刚好就是用 Vue 开发的项目，于是又研究起了这个问题，我希望工具这边能主动屏蔽响应式，降低使用者的心智负担。
在查源码，有了惊喜发现，Vue2.7 因为回迁了Vue3的一些特性，让Vue2也支持了主动屏蔽响应式，方法很简单，只需要给对象增加一个真值属性 __v_skip 即可，支持[email protected]+。
赶快用起来吧~~
闲来无事，突然回想起这个以前就在大脑中一闪而过的疑问，隐约记得当时vite官方说法是为了避开常用端口范围，但，为什么要选择 5173 这个有点“毫无亮点”的端口呢，还有什么其他原因吗？
我眼睛盯着 Vite 这个单词，脑中想着5173，忽然我似乎明白了：
V -> 罗马数字5
i -> 1
t => 7
e => 3这不就是黑客常用的起名方式吗？
为了验证我的猜测，我搜了一下 Vite 的 issue，发现果然有网友跟我想法一致：
https://github.com/vitejs/vite/pull/8148#issuecomment-1335439757
不过最后没有找到确切的证据，但上面的猜测离正确答案应该也是八九不离十了吧。
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
iconUrl: require('leaflet/dist/images/marker-icon.png'),
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})来源：https://github.com/Leaflet/Leaflet/issues/4968#issuecomment-269750768
一个老项目中用到了 leaflet 这个地图操作库，最近项目升级，需要使用 supermap，于是安装 @supermap/iclient-leaflet（依赖 leaflet），然后程序报错。
经检查，发现原始安装的 leaflet 版本为 1.5.1，而 iclient-leaflet 依赖 1.7.1，造成程序中同时引用了2个不同版本的 leaflet 导致错误，于是升级 leaflet 至 1.7.1。
一切就绪，run——错误依旧，无语.jpg。
继续排查，发现 npm 居然会重复安装 leaflet 1.7.1：通过 npm list leaflet 查看其依赖树为：
+-- @supermap/[email protected] | `-- [email protected] （此处重复） +-- [email protected] | `-- [email protected] | `-- [email protected] deduped `-- [email protected]
于是通过 npm ddp （或 npm dedupe） 清理重复依赖，问题解决。
基础资料
MDN https://developer.mozilla.org/zh-CN/docs/Web
CSS手册 https://tympanus.net/codrops/css_reference/
前端题目
https://github.com/haizlin/fe-interview
https://q.shanyue.tech/
前端周刊、日报
https://github.com/tnfe/TNT-Weekly
https://github.com/kujian/frontendDaily
https://github.com/tower1229/frontend-weekly
https://github.com/ascoders/weekly
https://github.com/sorrycc/weekly
https://www.yuque.com/mmfe/weekly
算法
https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md
CSS技巧
https://github.com/chokcoco/iCSS
https://chokcoco.github.io/CSS-Inspiration
CSS加载
https://connoratherton.com/loaders
https://projects.lukehaas.me/css-loaders/
https://loading.io/css/
https://365webresources.com/best-pure-css-loading-spinners/
https://icons8.com/cssload
https://loading.io/spinner/
https://dev.to/afif/another-100-css-loaders-for-your-next-project-352l
https://joebell.co.uk/sketches/loading-disco
JavaScrit
现代 JavaScript 教程 https://zh.javascript.info
33个JS概念：https://github.com/stephentian/33-js-concepts
ajax
http://louiszhai.github.io/2016/11/02/ajax/
Promise 资料
https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/%E5%BC%82%E6%AD%A5/Promises%E8%AF%AD%E6%B3%95
https://es6.ruanyifeng.com/#docs/promise
https://github.com/ljianshu/Blog/issues/81
https://segmentfault.com/a/1190000014938839
Vue
路径 https://segmentfault.com/a/1190000016120011#articleHeader6
Vue3
https://juejin.cn/post/6940454764421316644
https://juejin.cn/post/6914862150872170509
Vue Hooks
VueUse https://vueuse.org
vue-use-web https://github.com/Tarektouati/vue-use-web
vue-use-gesture https://github.com/koca/vue-use-gesture
OpenLayers 学习资料
https://iclient.supermap.io/web/books/modern-web-gis-in-action/kai-fa-zhi-nan/for-openlayers/zhun-bei.html
http://linwei.xyz/ol3-primer/ch01/index.html
https://www.zhihu.com/column/c_1098918318844612608
动画
PAG https://pag.io
https://svga.io
https://animejs.com https://www.animejs.cn
https://github.com/Tencent/vap
Raphael.js
svg.js https://github.com/svgdotjs/svg.js
TweenMax
Animater https://github.com/cutting-mat/animater
Nginx
https://xuexb.github.io/learn-nginx/
https://nginx-playground.wizardzines.com
https://ssl-config.mozilla.org
飞线
https://github.com/jsplumb/jsplumb
https://github.com/Molunerfinn/markline.js
https://github.com/anseki/leader-line
https://github.com/stonerao/flyLine
新用户/新功能引导
shepherd.js https://github.com/shipshapecode/shepherd
落地页模板
https://github.com/nordicgiant2/awesome-landing-page
效果集合
https://github.com/lindelof/awesome-web-effect
粒子：https://github.com/lindelof/particles-bg
下雨：https://github.com/codrops/RainEffect
GIS
坐标转换 https://github.com/hujiulong/gcoord ，https://github.com/wandergis/coordtransform ，https://github.com/CntChen/tile-lnglat-transform
360全景
https://ourcodeworld.com/articles/read/843/top-7-best-360-degrees-equirectangular-image-viewer-javascript-plugins
Three.js https://threejs.org/
360-image-viewer https://github.com/Jam3/360-image-viewer
Kaleidoscope https://github.com/thiagopnts/kaleidoscope
Panolens.js https://github.com/pchen66/panolens.js
Panellum https://github.com/mpetroff/pannellum
Photo Sphere Viewer https://github.com/mistic100/Photo-Sphere-Viewer
Marzipano https://github.com/google/marzipano
小程序
mpx https://github.com/didi/mpx
Taro https://github.com/NervJS/taro
Wepy https://juejin.cn/post/6844903478184148999
fr 单位专用于 grid 布局，意为 fraction（分数），额，好像也不是很好理解~
对比 px（像素）、em（文字）、vw（窗口），fr 好像缺了一个中文名字，来帮助大家理解。
所以我自告奋勇，凭借对 grid 布局还自觉得比较理解的基础上，给 fr 起了一个中文名字：份（儿），代表占剩余空间份数，这个剩余空间是指除去已知的宽度（包括px、%、grid 间隔等）之后的剩余空间。
读音相近，意思也差不多，我个人对这个名字还是比较满意的~
grid-template-columns: 150px 1fr;
//grid 容器分为了2列，第一列宽度150px，第二列占剩余空间1份儿，因为剩余空间只分成了1份儿，所以第二列也就是全部剩余空间。这种情况下，第二列写 100fr 也是相同的效果。grid-template-columns: 150px 2fr 3fr;
//grid 容器分为了3列，第一列宽度150px，第二列占剩余空间（100% - 150px）的2份儿，第三列占剩余空间3份儿。也就是剩余空间总共分为了 2+3=5 份儿，第二列占2份儿，第三列占3份儿。怎么样，是不是觉得 fr 很好理解了。
Vite2 已经发布，尝试将一个基于 Vue CLI 创建的 Vue2 项目迁移到 Vite 上来，多个地方需要调整，在此记录。
npm i -D vite
npm i -D vite-plugin-vue2
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
plugins: [
createVuePlugin()
]
注：图片来自网络，版权归原作者。
最近用到 video.js 来播放 HLS 视频，因为视频为实时监控画面，所以不需要单击暂停功能，以免用户误操作。
网上大多数解决办法都是通过CSS来屏蔽鼠标事件：
.vjs-tech {
pointer-events: none;
}
继续阅读“video.js 7 禁用单击暂停，保留双击全屏” 我一直以为在 production 模式下打包发布的 Vue 应用没法使用 Vue Devtools，原来我错了。
Vue Devtools 的开启条件是由 Vue 基类的 config.devtools 属性控制的，只要其值为 Truthy 即可开启。
继续阅读“production 模式下开启 Vue Devtools”