在常见的后台管理系统项目开发中，为了防止信息泄露或者对知识产权的保护，常常需要在页面添加水印。水印内容一般是个人信息或者版权标识等。最近项目中就遇到需要添加水印的问题，尽管已经开发完了，这里还是想记录一下解决过程。

现在前端开发项目一般都会用 ES Module 模块化开发方式，这就少不了用 import 去加载相关依赖包或组件等。随着 import 语句使用量增加，就迫切需要某种规则约束当前页面的 import 语句的排序，从而提高代码的可读性和可维护性，避免出错。

最近工作中遇到后台接口返回图片二进制流，需要前端在页面上正常显示出图片的需求，网上也介绍了多种方法解决这个问题。今天还是想总结下这个问题的解决方案及涉及到的知识点

在做单元测试中最重要的就是编写单元测试用例。vue 项目的单元测试要测试什么呢？ 今天主要来介绍下如何编写 vue3 组件的测试用例

为了提升代码质量，降低 bug 率，开始在前端项目中增加单元测试，重点是对组件的单元测试，避免因为修改公共组件导致的隐匿性 bug。考虑到我们的项目主要是用 vue 框架，因此优先采用 vitest+@vue/test-utils 来实现

无意中接触到 docker，知道 docker 可以在服务器上部署各种环境，从而解决无需在服务器上安装各种软件的问题，只需要在容器中安装即可，对搭建运行环境非常友好，于是自己就摸索着学习 docker

在工作中我们常会用 ElementPlus 作为项目的基础 UI 组件，这里面丰富的组件基本能覆盖到大多数场景。在 ElementPlus 文档中我们可以知道 Form 表单组件中 DatePicker 日期选择器可以通过 type 传入不同的单位来选择不同日期单位的日期时间选择器组件。
type= week | month | year | dates
但是如果要支持根据季度单位来选择，那该怎么办？
今天就来介绍下如何基于 ElementPlus 封装一个季度选择器组件

今年上半年主要是用 Electron 开发桌面应用，在开发过程中遇到各种问题也只能自己查资料，最近在掘金中看到刘晓伦大佬写的 Electron + Vue 3 桌面应用开发掘金小册，果断买下课程仔细学习下，这里主要记录下自己在 Electron 开发中遇到的知识盲区

因为之前做过一个技术栈为 vue3+vite+elementPlus 的后台管理系统项目，当时为了方便创建类似项目还搭建了项目模板（github：vue3-vite-elementPlus-admin）。
随着公司业务发展类似项目越来越多，一个仓库一个项目的管理形式弊端越来越突出：

1. 每个项目都要搭建 eslint+prettier+commitLint+styleLint 等代码规范校验
2. 每个项目都要搭建许多类似的常用组件和创建公共 utils 函数
3. 各个项目的主要依赖库（vue,elementPlus）版本可能不一致，且存在重复安装
4. 有时候组件改动会涉及到多个项目都要手动更改

手写 promise 是前端面试过程中的必考题，今天来温习下手写 promise 过程并写下思考过程，熟悉思路。

electron 应用在增量更新时会从服务器下载更新包一般是 app.asar 或者 app.zip，然后解压更新包替换本地 app 文件夹。这里的服务器上下载文件如果是下载到 C 盘就会报错
Error: EPERM: operation not permitted

一期我们介绍了完整的 Vue3 项目的搭建及配套工具的使用如何用 Electron+vue+vite 构建桌面端应用(二)。今天主要介绍我们的重点，electron 实战开发中常用到的工具及常用功能介绍

上一期我们主要介绍了如何用 Electron+vue+vite 搭建桌面端应用(一)，只是简单创建了一个项目还有很多内容需要完善，今天来介绍下 vue3 项目开发的配套设施 vue+vue-router+pinia+element-plus 以及 eslint+prettier 等，比较熟悉的同学可以直接略过。

在 electron+vue 项目中，vue-router 采用 history 模式在开发环境下能够正常显示页面，但是打包后发现页面 app 节点中的内容为空，页面空白

<div id="app" data-v-app=""><!----></div>

今年上半年主要是做 IM 桌面客户端项目的开发，主要用到的技术有 Electron+Vue+Vite，这里主要介绍下这个项目的构建过程方便下次快速创建类型项目。

最近在国产银河麒麟系统上开发一个 im 桌面应用，采用 electron+vue3+vite 技术栈，在安装 electron 过程中发现在银河麒麟 mips 架构上无法安装 electron，因为 electron 官方并没有提供 mips 架构的包，求助龙芯开源社区采用离线安装 electron 才解决这个问题。

学习数据结构和算法十分重要。首要原因是数据结构和算法可以很高效地解决常见问题，这对你今后所写代码的质量至关重要（也包括性能；要是用了不恰当的数据结构或算法，很可能会产生性能问题）。其次，对于计算机科学，算法是最基础的概念。

在日常开发中难免会遇到写正则匹配的问题，平时总是从网上搜搜看，写的也匹配不了。总觉得这块自己的缺陷比较大，于是就专门在极客时间上学习了下正则表达式课程，这里记下学习记录，希望学完后所有的正则问题都能迎刃而解。加油！

随着 Typescript 的普及，越来越多的前端项目开始使用 Typescript，做了几个项目后发现自己对 Typescript 内置类型非常不熟悉，今天梳理下知识点介绍下 Typescript 内置工具类型和常用操作符

Partial<Type>
Required<Type>
Readonly<Type>
Record<Keys, Type>
Pick<Type, Keys>
Omit<Type, Keys>
Exclude<UnionType, ExcludedMembers>
Extract<Type, Union>
NonNullable<Type>
Parameters<Type>
ConstructorParameters<Type>
ReturnType<Type>
InstanceType<Type>
Uppercase<StringType>
Lowercase<StringType>
Capitalize<StringType>
Uncapitalize<StringType>