周明杰
### 前言  去年下旬公司启动了一个 B To B 营销项目，因为各种原因，决定使用 [vue-antd-admin](https://iczer.gitee.io/vue-antd-admin-docs/) 这个开源的前端解决方案，在那之前我听说过 Ant Design Pro,应该是阿里内部团队出的，vue-antd-admin 是它的 vue 仿版，其实还有个 Ant Design Pro Vue ，也是 一个 开源的 vue 仿版，这种集成方案可以快速提升业务开发效率，但是也有一些缺点： 一是这种项目考虑的场景比较全面，对一个具体的公司项目来说，却显得设计比较冗余，在通读文档后，可以较快的速度完成业务功能开发，但是是在它的框架内；定制化的需求是千变万化的，这时候如果和它的设计理念不相符的话，就要做比较大的兼容二次开发。 二是性能优化会很麻烦，也是因为太多冗余设计，导致文件量比较大，这和精简的优化策略违背。 三是缺乏挑战性，项目技术升级不太方便。 基于以上特点，团队要合理评估决定是否适合当前项目，对于当时我们这个项目来说还是比较合适的，我们团队，产品、设计没有过多干扰，前端话语权还在，所以效率真的很快，而且它提供了一些很cool 的效果和模块，跟自己重新开发比，能节省大量的时间，比如...
## 前言 接着上篇讲，本篇主要给大家讲解一下子弹击中物体、物体销毁、敌方坦克构建生成、运动算法、爆炸效果、以及障碍物的生成；了解了这些我相信你可以不依赖游戏引擎实现大部分小游戏的开发。 **Es5版本：** [在线游戏](https://www.zhoumingjie.com/Battle-of-tank/battle%20city/index.html) [源代码](https://github.com/mingjiezhou/Battle-of-tank) **W/上 S/下 A/左 D/右 F/射击** 让我们开始吧！ --- ## 敌方坦克的生成 我们可以使用 for 循环和Tank 构造函数，批量制造多个敌方坦克，x,y 为其在画布中的坐标，direction 为坦克当前方向，type 为精灵图中截取坦克图片的信息，包含了坐标，尺寸，类型等 ``` for(let t=0; t obstacle_cp[0].y && fp[idx].y <...
## 前言 记得几年前刚做前端开发的时候，跟着师傅用纯 es5 实现了这款坦克大战，可以说我入行前端是从 javaScript 小游戏开始的，时间已匆匆过去了数年，前端发展日新月异，各种新框架、新概念层出不穷，很容易就迷失在对各种新技术的盲目学习和应用中，真正的编程是什么呢？值得思考的问题。 -- 我准备用 vue3 重新实现一下这款游戏，顺便回顾和梳理下自己的知识体系。 **Es5版本：** [在线游戏](https://www.zhoumingjie.com/Battle-of-tank/battle%20city/index.html) [源代码](https://github.com/mingjiezhou/Battle-of-tank) **W/上 S/下 A/左 D/右 F/射击** --- 让我们开始吧！ ## 架构搭建 项目技术选型为 vue3、vite、less、pnpm、ts，按照vue3 官网文档来新建项目，注意：虽然我用了 vue3 实际上只是强行尝鲜，主体内容都是 js 用到的框架特性有限。...
近期拿到一个需求，里面涉及到网页打印，本来以为执行浏览器自带的 window.print() 方法调取打印控件就好了，没想到事情并非那么简单, 打印预览中不仅样式不对，连内容都无法展示全，多页的内容只显示了一页，这明显无法满足项目需求啊！ 于是研究了下相关的优化方案，整理如下： ## window.print() 默认效果缺陷 1.打印控件默认没给分页，就只显示了一页 2.dom 布局和样式很容易发生错位、丢失 3.我想要局部打印，但默认是获取的整个 body.innerHtml 的内容 ## 打印样式 这种方式是通过增加针对打印机及预览才识别的css代码来调整效果，css 引入的方式有下面几种 ### 样式加载 1. ```` 2. @import url print ``` 概述 @import CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset...
### 前言 select 下拉框，想必我们都经常用的，不论是表单提交还是搜索，都常有它的身影，现在的组件库也都有封装相关组件，如 ant-design-vue 的 a-select、element-ui 的 el-select，用法一般是普通的选择、多选、支持搜索的选择、联动等。 那么你有没有遇到过需要对 select 切换进行拦截的操作？ 我就遇到了这样的需求，所以记录一下，重点介绍结合 proxy 的实现方案。 效果图： [在线测试地址](https://vv4u38.csb.app/) ### 要点 不论是原生的 select、a-select、el-select，其官方文档中都并没有显示其提供了 类似beforeChange 事件这样的钩子，而只有选项改变后的 change 事件回调，这样如果你在 change 事件里绑定弹窗事件的话会导致，Modal 对话框弹出时选项已经改变，此时选择取消操作，则还需要数据回溯，视觉体验上也不好；针对这个问题，我给出三种解决方案。 #### event.stopPropagation...
### 前言 扫雷游戏作为一个经典的window 小游戏，也是 leetcode 第 529 题，今天我将手把手教你完成这个实践方案。 我用的技术栈：react、webpack5、pnpm、less，关于pnpm 的使用可以参考我这两篇文章 [昨晚，我体会了没有 pnpm 的痛](https://juejin.cn/post/7062611988886585381) [2022 前端包管理方案-pnpm 和 corepack](https://juejin.cn/post/7060448346107805732) 效果图： [在线访问]( https://j0uim.csb.app)、[源码地址](https://github.com/mingjiezhou/notes) ### 搭建项目 如果你希望尽快开始的话，像这种 js 小游戏之类的项目是很适合用在线编辑器来写的，最初我是用的 [codesandbox](https://codesandbox.io/) 这个在线编辑器来写的，它比 codepen 之类侧重代码片段的工具来说更好用，甚至可以完成完整项目的在线开发，不过这次我将使用本地环境来搭建。 首先使用...
### 前言 [上一篇](https://juejin.cn/post/7064481944863506445) 讲了使用 vue-antd-admin 开发中台项目后的一些感想，并没有提到其动态路由的配置，主要是因为当时觉得其文档写的比较详细了，而且当时并没有遇到什么坑，没想到今天接了一个需求，需要开发一套消息系统，其中有一个显示全部消息的页面，我按照官方文档中的方法配置了页面路由后，发现和我想要的效果不同，其直接全屏显示了，而我需要的是显示在侧边栏菜单的右侧内容部分，于是仔细看了文档和源码后，花了亿点点时间解决了这个需求，并且产出了本篇文章。 ### 路由与菜单 我长话短说，基本的使用一定要看官方文档，概述起来就是说，vue-antd-admin 项目也是完全依赖 vue-router 并使用其配置规则，其提供了同步、异步两种路由方案： 同步的非常简单，就是我们熟悉的vue-router 的配置, 示例代码可以看这个[ src/router/config.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/config.js)就不讲了； 关键是异步，首先需要本地配置路由的map 文件，也就是把所有的完整路由拆分成单个的路由配置进行注册, 文件在这里 [/router/async/router.map.js ](https://github.com/iczer/vue-antd-admin/blob/master/src/router/async/router.map.js) 然后根据接口返回的路由配置与map 文件结合生成最终的路由，接口返回的路由格式如下 ``` [{ router: 'root', //匹配 router.map.js 中注册名...
课题： 1. 如果没有U盘，window 和 mac 本地计算机之间如何传输大量文件？ 2. 为什么要用 pnpm？硬链接、软链接是什么？ ### 起因 事情是这样的，最近自己的办公设备，从thinkpad 更换到了macbook pro14，因为m1 芯片的强悍性能，工作效率都有了很大提升，甚至每天背着回家都不嫌累了，这不，昨晚照常早早的回到家，做好饭，打开电脑看着电影，突然想起来之前电脑上还有很多项目代码没迁移，gitlab 上的就不说了，直接clone 下就好了，剩下的都是一些历史项目老代码绝版的～，手头有U盘和移动硬盘但是 mac 没有 usb 接口，转接头也在公司，而且这个硬盘还不能直接供mac 访问，还要用额外的软件处理格式。。，嗯想了一下，手头可行的方案大概有这些。 #### 快传网站 之前偶尔用过[奶牛快传](https://cowtransfer.com/)来传输压缩包文件，当时是因为内网原因某些 npm 包下不下来，所以同事用这个网站传给我的，不过那个太慢来，限制也多，而且这种方案都要把自己文件走一遍他们服务器的，不适合传输隐私文件，不太行。pass #### 局域网共享 我记得一般公司内网都有局域网共享，来存储访问共享文件夹，而且可操作复制到本地，那么...
长期以来，node 中自带的包管理工具只有 [npm](https://docs.npmjs.com/), 作为官方指定工具，使用者众多，从体验上来讲，却是一般，速度真的慢。 ### npm 的不足 - 串行安装，要等队列中当前 package 安装成功后才会继续下一个package 的安装 - install 慢，无缓存，删除node_modules 后重新 install 无法利用缓存 - node_modules 依赖冗余过多 npm 下载慢的问题一个重要原因是因为包镜像在国外，所以可以通过修改使用国内镜像源来解决这个问题 ``` // 查看当前镜像源 npm config get registry...