1，h5 页面的自适应 rem、vw、vh 之间的反复横跳 rem 单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变 rem 的大小,即 html 的 font-size（默认是 16px ） === 1rem 。 但是，所有屏幕的 1rem 都等于 16px 的话，那岂不是没有自适应的功能。所以，需要一个对照物（即：某个特定像素的屏幕）作为标准，然后其它屏幕按照参照物对一个单位的 rem 所对应的 px 值进行相应改变。 那么，我们该选一个怎样的屏幕作为基准呢？这里以 iPhone X 为准，使用 iPhone X 的原因是：其手机像素为 750 x 1624 ，我们通常会拿宽度去做计算，而 750 这个数字恰巧是整数，便于计算。同理，iPhone 6 亦是如此。 传统方法设置 html 的 font-size 值 # 基准大小 const baseSize = 32 # 设置 rem 函数 function setRem () { # 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.do

0，新的插件 vue-cli-plugin-i18n 。 看下载量还是挺多的，目前没看到有什么亮点 1，常用功能。 用 require.context 加载指定目录下的所有语言包 期望的树结构： 1，所有文本堆在一个。（适用于文本量不大的情况下，即大部分场景都可以使用） 优点：无脑管理，不用思考拆包、动态加载、webpack 以及 i18n-ally 插件的配置。 缺点：多人合作下同时操作一个文件会容易冲突（最好就是彼此管理自己的文件）。配置 webpack 和 i18n-ally 会相对麻烦不少。 en.json zh-cn.json 2，按页面进行分包。（适合文本量大的项目） 优点：解决多人合作下同时操作一个文件会容易冲突，管理方便（直接拆分多个文件）。基本杜绝 key 值重名的问题（哪怕重名了，也只是本文件内的重名，可以通过编辑器快速查到重名）。 缺点：配置是真的麻烦。 PS：个人不建议有二级文件夹（如下），尽量一个页面一个文件就好。（不然 i18n-ally 不好识别。反正我是没成功过！） en: pageA.json pageB.json child

背景经历去年（2021）的新版社区翻车事件，才有这篇文章。由于习惯单人作战，一旦遇上多人协作就会乱套，比如：页面、组件的设计上存在许多不合理的地方，主要是在分配工作和沟通上出现问题。那么我们就需要通过科学有效的方法去做好上述需要改进的工作。（而非单凭一张嘴把工作分配完） 做这个的动机 提高多人协作的工作效率 减少不必要的沟通成本 提高工时估计的准确性 把写过的文档按页面保存到相应的路径下可以作为指引，帮助新入手的同事更快的了解项目的任务流程，而非单纯的通过读代码去认识项目。且该文档就有版本管理功能，可以随时修改。 Vue.js 提高封装组件效率的前置知识点Props 属性继承和 React 的高阶组件（HOC）道理相同 有 A、B、C 三个组件，对应的关系是 A（父）→ B（子）→ C（孙）。 此时的场景是在 A 的作用域需要把 C 的 props（price） 传递到 C 上，此时利用 v-bind=”$attrs” 将 price 值，从 A 继承到 B 再继承到 C 了。而非通过逐个传 props 值。 具体代码实现 <!-- 根组件 App.vue --> &l

序言按常理，年终总结应该在年底最后一周完成，这次我又拖了大半个月去写的理由是工作真的忙，似乎年底前两个月都比较忙吧。但这种忙碌却并非是那种有充实感的。。。。。。 比较糟糕的工作方式：低效的沟通、无意义重复性劳动、遭人唾弃的PUA。 在这恶性循环下，我开始陷入精神内耗之中。既是项目结束后我的精神状态一直都很低迷。仿佛整个人又变得消极起来，沉不下心学习，更何况去写这份年终报告。 回顾2021，给我感觉是过得特别快，仿佛按下了快进键，基本上都是 通勤-工作-学习 中不断的循环播放（这很符合深圳的快节奏生活，毕竟来到深圳这个地方总会感觉到有一股莫名的力量在推着你前进）。 第一次经历失业：21年春节后 VT 团队需要新增一名 UI 设计师，本以为公司能开始往积极的方向大步前进时，没过多久就传出噩耗，股东老板双双因涉嫌一些问题而无法将项目进行下去。（万万没想到，我思考过公司会有许多种倒闭的方式，却没能考虑到还有这一遭）当时老板 Terry 还是希望通过接外包项目的形式去给公司多缓一口气。但在我看来并不可靠，最后我选择退出。（这可能是我本年度唯一一次做的、理性的、有远瞻性的决定。因为不久后这个公司就

前端数据共享的那些事发展历程1，不辞辛苦的上下级组件间传递数据<!-- parent.vue --> <template> <div> <!-- 利用 js json 对象的引用方式去传递对象，然后所有子组件一起用 --> <child :data='{ a: 1 }'></child> </div> </template> <!-- child.vue --> <template> <div> <!-- 子组件可以避开 vue.js 的警告对数据进行修改 --> {{ data.a }} </div> </template>评价：开发一时爽，接手火葬场！当共享对象被足够多的组件引用后，调试和定位问题将难以进行。比如：data.a 到底是被哪个组件修改的？又被改了多少次？ 2，机智一点利用外部 js 文件共享

序言  不得不感叹，一毕业即互联网寒冬，想跳槽却遇上新冠疫情。不得不说倒霉的事情总和我不期而遇。有句话说得好，“少埋怨，多做事。”总比浪费时间要好，我更应该调整好心态去应对这些事情。可是！小孩子脾气的我，还是有很长一段时间没法越过这个难关。貌似全年都在抱怨和压抑的氛围中生活。后来，随着国内疫情情况的好转，感觉生活逐渐好转。最后，不管如何我还是会一如既往的披荆斩棘突破难关，毕竟真男人都爱正面硬碰硬。 1，疫情的影响在家里禁足了都有一个多月了，每天都在家里玩无限火力（233），虽然我自身收入影响不大，但社会上的中小企业已经都熬不住纷纷裁员、解散公司。庆幸的是这些事都没有经历到我的头上。当时的我还没清楚的意识到举国停摆对社会的影响到底有多大？直到我回去中山工作准备跳槽的事宜，才知道一个技术岗位大概能有10~20人参与竞争。当时想来深圳发展的我被这数据浇上了一盆冷水。无奈大城市对程序员的要求相对二线城市要高。（主要体现在工作时间，理论知识。如果是高级一点的岗位，要求则更高）好不容易约到一次的面试机会，这个面试难度非常高，基本全程懵逼（当然，这和我本身有关，没有做好面试前的准

序言  新公司是一个初创团队，研发团队的人较少，自然要把精力更多地投放到业务上。所以我们团队内部决定使用 serverless 的函数运算作为服务的部署方案。这样我们就可以减少购买云服务器和运维的成本，就可以更多的把精力留在业务上。至于技术栈，我会去使用 nuxt.js 与 nest.js 这一套 node 全栈方案。最后，本篇文章只介绍如何部署到云厂商上，这里我用的是阿里云为例。（主要是我的域名备案在这里，所以只好用这个了。）。至于数据库如：mongoDB部分，以后会补上，这个并不难，主要是在部署 nest.js 项目有坑（官方不支持直接部署，需要手动适配）。 1，需要的准备1，你需要有一个备案的域名。（真的很重要！！！） 如果是部署一些网页还好，可以用临时域名，但是一旦部署服务端，就会被强制添加一个 header 名为 Content-Disposition: attachment ，如果你不用你自定义的域名，你的一切请求将会以一个文件的形式下载（体验很差）。 2，为每一个服务创建一个 access key 。 如图：进去 serverless 服务首页配置就好

  前端技术圈发展得太快，Vue3 进入最后的准备状态，而 React + hooks api + TS 已经香遍所有新项目中。TypeScript 从受欢迎的程度以及新项目的使用率也可以了解到 TS 将会成为前端工程化的标配语言。（拾人牙慧。我还没开始学，还不知道好不好。）   接下来我将会去往学习 TS ，再通过 Nest.js 的后端框架进行项目实践（完成一个多功能的 CMS）。学习路线是 TS -> 简单的 node.js -> Nest.js 的边开发边学习方式。   不过这次项目会往一个成熟的工程化发展，不会只是用个 pm2 部署了就完事，而是参考企业常规软件架构引入 CI/CD 的模式，以尽可能的方式达到企业级标准！ 说到底还不是为了加薪!!!!!!!!!!! TypeScript 参考学习资料：掘金收费电子书 https://juejin.im/book/5da08714518825520e6bb810 可能不会急着去写关于 TS 的知识点。后期会通过在学习 nestjs 过程中去对 TS 进行补

  隔了好多个月，终于想去学习 Vue.js 的源码了。为此我特地去重温 JS 基础点（希望阅读源码之路不要太坎坷），本文不定时更新，且时间跨度较大（大约半年到一年的时间）。加油，奥里给！！！！！！！ 本文将参考自慕课网的 Vuejs 源码阅读的实战课程。以及相关电子书 https://ustbhuangyi.github.io/vue-analysis/ 切记！阅读源码切勿心急，别过度最求明白各个细节，第一遍先了解个大概会更好！否则你会卡在一个无底洞的深渊！源码的版本（特指浏览器运行的版本）1，runtime 版本和 runtime + compiler 版本的区别？// TODO：仍有疑惑（编译过程的产物各是什么？）首先从模板（template）到 Dom 的过程是这样的 template --> ast --> render --> vDom --> Dom1，runtime only 一般我们使用 vue-cli 去构建项目的时候会去使用这个版本，因为我们可以靠 webpack 的 vue-loader 去编译 .vue 文件中的

  生日快乐，愿你乘风破浪终遇彩虹！