monorepo 项目搭建 monorepo 多包项目指的是将多个项目存放在一个仓库中进行管理，并通过工具支持互相依赖。 相对于普通的一个项目一个仓库（multirepo），monorepo 最大的好处是项目间引用更便捷，关联包更新后无需经过打包、发布、安装等步骤就能够直接使用。 monorepo 有多种搭建方式，目前较为主流（Vue3 采用）的是使用 pnpm。本文不是完整的教程文，而是在 spatial-pl
无感刷新 Token JWT 已经在 HTTP 鉴权中被广泛使用，但普通方案中 Token 到期后用户就需要重新登录，为了安全性也不能将 Token 有效期设置的过长。 为了解决这个问题，可以使用的方案包括： 1. 后端额外返回 Token 过期时间，前端开启定时任务或在请求前判断是否临期，并重新获取 Token。 2. 后端返回 AccessToken + RefreshToken，前端使用 AccessTo
浏览器从输入网址到页面显示的过程 1. 浏览器主进程解析地址栏中的内容，如果是地址正确拼接协议；如果是搜索内容，拼接搜索地址。 2. 将请求地址交给浏览器网络进程，构建请求行 3. 查找是否存在缓存，有则直接返回缓存 4. 通过 DNS 域名解析得到 IP 地址 查找顺序为： 1. 查找浏览器缓存，有缓存则返回 IP 2. 查找本机缓存，有缓存则返回 IP 3. 查找本机配置 DNS 服务器，有缓存
JS 执行流程 1. 渲染引擎在解析 HTML 过程中遇到 script 标签时，会暂停解析并开始请求脚本（需要 script 标签没有 defer 或 async 属性），脚本内容响应后作为一个宏任务放入消息队列（Message Queue）中 2. 事件循环（Event Loop）机制从消息队列取出脚本任务后，引擎对代码进行词法分析，将代码拆分为一个个词法单元（Token） 3. 引擎对代码进行语法分析，
VitePress 扩展首页内容 在 VitePress 1.0 之后，官方提供了 createContentLoader API，可以更方便的收集文档信息 createContentLoader API 是 VitePress 提供的辅助方法，接受相对于 srcDir 的 glob 匹配表达式，以及选项参数。执行后会返回一个 { watch, load } 的加载器对象，VitePress 要求默认导出该对象，在执
VitePress 自动生成目录插件 VitePress 是继 VuePress 后全新的静态站点生成器，基于 Vite 实现最大的特点就是快，官网对其的介绍是 Simple, powerful, and fast，非常适合搭建博客和组件库文档等。 最近 VitePress 更新到了 v1.0.0-rc 版本，基本处于可以放心使用的状态。如果还不熟悉，可以查看官方中文文档或我的个人文档。 使用 VitePress 搭建
tsconfig.json tsconfig.json是 TypeScript 项目的配置文件，放在项目的根目录。反过来说，如果一个目录里面有tsconfig.json，TypeScript 就认为这是项目的根目录。 如果项目源码是 JavaScript，但是想用 TypeScript 处理，那么配置文件的名字是jsconfig.json，它跟tsconfig的写法是一样的。 tsconfig.json文件主
VitePress 进阶语法 VitePress 使用 markdown-it 作为 md 语法解析器，md 基础语法可以参考基本撰写和格式语法，此外 vitepress 还提供了更多个性化语法 md 文档中的标题会自动生成锚点链接，可以通过页面路径#锚点名称的形式跳转到文章的具体位置，还可以通过如下格式自定义锚点名称 `md ` 定义后便可以通过最新的锚点名称定位页面位置（此时原名称不可用），本节的标题就
TypeScript 模块 任何包含 import 或 export 语句的文件(.ts、.d.ts)，视为一个 TS 模块（module），对应的不包含 import、export 语句的文件会当作一个全局脚本文件。 TS 模块本身是一个作用域，不属于全局作用域。模块内部的变量、函数、类必须用 export 命令声明并在其他模块用 import 命令导入才能使用。 如果一个文件不包含 export 语句，但希望
TypeScript 类型声明 前面提到了有导入、导出语句存在的文件被 TS 视为一个模块，模块内的类型有自己的作用域，其他文件只能导入后使用。而没有导入、导出语句的文件则被 TS 视为全局脚本文件，全局脚本文件被 TS 编译后，其中的类型便可以在 TS 编译范围内的其他文件中直接使用。 我们可以创建一个示例项目查看： `sh mkdir ts-test cd ts-test npm init -y ts
Axios 源码解析 阅读源码前先熟悉库实际的使用方式以及各种 API 有助于找到阅读的切入点，官方中文文档 axios 库基于核心类Axios，在库中默认导出了一个名为axios的实例对象，并传入了基础配置defaults 使用中所有的操作通常基于默认导出的实例对象axios实现。当然也可以自己导入Axios类，手动定义全部配置后新建实例使用 基础 API 有： 1. instance.defaul
vue 中的 v-if 和 v-for vue 中有一个经典的面试题：v-if 和 v-for 能够一起使用吗？ 简单的回答是： - vue2 中不可以 - vue3 中可以 再深入回答一点可能会提到两个命令优先级的问题，但不知道为什么是这样的。这篇文章从原理来理解这个问题。 我们分别使用官方提供的 Vue Template Explorer 和 Vue SFC Playground 来查看 vue2 和 vue3 中对
vue 中的 watch 和 watchEffect vue 提供了 watch 方法，可以监听值的变更，在变更时触发回调。vue3 中又新增了 watchEffect 方法，可以不指定监听的值，而是在回调中直接使用，方法会自动收集使用到的依赖，并在依赖更改时重新执行。 watch 和 watchEffect 源码都定义在 runtime-core/src/apiWatch.ts 中。 学习 watch 前需要先了解 Vue 的响应式数据
VitePress 扩展首页内容（旧） 许多的自定义主题中都有提取页面并以列表形式展示在首页的功能，例如配置解析-主题配置中介绍的vitepress-blog-zaun 在 VitePress 1.0 之前的实现思路大致是通过 NodeJS 在构建阶段读取项目中的 md 文件，获取关键信息后存储在 .vitepress/config 配置选项 themeConfig 中，再利用存储的信息自定义首页的样式 利用这些信息，我们可
VitePress 添加评论功能 博客想添加评论功能通常有两种方法： 1. 自建或第三方的评论服务 2. 基于 Github Issue 实现 使用第三方评论比较明显的缺陷是需要复杂的注册认证，而且用户评论时大概率也需要注册登录，并且可能会有广告 而基于 Github Issue 实现的评论功能，可以直接借助于 Github 账号登录实现评论，而且评论直接放在仓库 Issue 中个人觉得也更符合技术博客的定位。但这种
JSDoc JSDoc 是 JS 官方的代码注释规范，还可以用于生成 API 文档，具体可以查看 JSDoc 中文文档。 TS 官方以 JSDoc 为基础，扩展了对 JS 代码的类型支持，使用 JSDoc 能够实现大部分 TS 的功能。 本文仅介绍 TypeScript 支持的 JSDoc 标签，和部分 TS 不支持但常用的标签。 当项目中存在 jsconfig.json 文件，且开启了 a
TypeScript 类型工具 TypeScript 内置了 17 个类型工具，可以直接使用。 Awaited用来取出 Promise 的返回值类型，适合用在描述then()方法和 await 命令的参数类型。 `ts // string type A = Awaited>; ` 上面示例中，Awaited会返回 Promise 的返回值类型（string）。 它也可以返回多重 Promise 的返回值类型。
TypeScript 类型缩小 当一个值的类型为联合类型时，具体代码中我们可能知道这个值为某一种具体的类型，但 TS 编译器不知道。这就会导致针对具体类型的操作在这段代码中报类型错误。例如： `ts function padLeft(padding: number | string, input: string): string { // 报错，padding 有可能是字符串 return " ".repeat
TypeScript 类型映射 映射（mapping）指的是，将一种类型按照映射规则，转换成另一种类型，通常用于对象类型。例如从已有的对象类型 A 映射得到新的对象类型 B： `ts type A = { foo: number; bar: number; }; type B = { [prop in keyof A]: string; }; ` 实例中 [prop in keyof A] 得到了类
TypeScript 创建类型 前面的介绍中所使用的都是直接在变量、参数、函数后添加“字面量类型”，但实际的使用中为了更好的复用和代码的简洁会将类型提取出来单独使用。 TS 中提供了类型别名 type 和接口 interface 两种创建类型的方式，此外类 class 也可以作为一个单独的类型。 TS 中对类（class）提供了全面的支持，同时类也可以作为一个类型，但是区别是编译后会保留类代码，而其他方式创建的类
TypeScript 装饰器 装饰器（Decorator）是一种语法结构，用来在定义时修改类（class）的行为。在语法上，装饰器有如下几个特征。 1. 第一个字符（或者说前缀）是 @，后面是一个表达式。 2. @ 后面的表达式，必须是一个函数（或者执行后可以得到一个函数）。 3. 这个函数接受所修饰对象的一些相关值作为参数。 4. 这个函数要么不返回值，要么返回一个新对象取代所修饰的目标对象。 下面就是一个最
数据调整顺序方案 在业务场景中，经常会有数据需要调整顺序的需求，例如菜单上、下移动，表格数据拖动排序等等。 这个需求前后端实现起来都有一定的难度，本文是在开发全栈应用时，对后端调整顺序处理的思考和记录。 在下文中，以 D（data）指代全部数据排序字段值组成的数组，以 C（current index）指代需要移动的数据的当前下标，以 N（new index）指代需要移动的数据的目标下标 这是最容易想
TypeScript 基本用法 TS 类型声明的写法一律为 标识符: 类型，函数参数和返回值也是如此： `ts let foo: string; function fun(num: number): string { return String(num); } ` 上面的示例中，我们指定了 foo 变量的类型为字符串；fun 函数的参数类型为数字，返回值类型为字符串。 如果变量赋值或传递的函数参数或返回值
TypeScript 类型断言 对于没有类型声明的值，TS 会进行类型推断，很多时候得到的结果，未必是开发者想要的。 `ts type T = "a" | "b" | "c"; let foo = "a"; let bar: T = foo; // 报错 ` 上面示例中，最后一行报错，原因是 TS 推断变量 foo 的类型是 string，而变量 bar 的类型是 'a'|'b'|'c'，前者是后者的父类型,所
TypesScript 类型运算 联合类型指多个类型组成一个新的类型，用符号 | 表示： `ts let x: string | number; x = 123; // 正确 x = "abc"; // 正确 ` boolean 类型就是一种联合类型，等同于 true | false。联合类型的第一个成员前面也可以加上 | ，可以便于多行书写（编辑器格式化代码会取决于单行长度自动调整为此效果）： ` let x
TypeScript 常见类型 JS 中将值分为 8 种类型： 1. boolean `ts const x: boolean = true; const y: boolean = false; ` 2. string `ts const x: string = "hello"; const y: string = ${x} world; ` 3. number `ts const x: number =
TypeScript 泛型 有时候函数返回值的类型与参数类型是相关的，为了表示这种类型关联关系，TS 提供了“泛型”的概念，泛型的特点就是带有“类型参数”（type parameter）： `ts function getFirst(arr: T[]): T { return arr[0]; } ` 上面的示例中，函数名后尖括号内的部分就是类型参数，称为函数的泛型。本例只有一个类型参数，实际使用时根据需要
TypeScript 特殊类型 当值指定为 any 类型时表示该值不会被类型系统检查，也可以说这个值可以是任何类型，没有任何限制。 TS 将 any 类型称为“顶层类型”（top level），即是其他所有类型的全集 any 类型的变量可以赋予任何类型的值，也可以被赋予任何类型的变量： `ts let x: any; x = 1; // 正确 x = true; // 正确 let y: string; y
TypeScript 简介 TypeScript（简称 TS）是微软公司开发的基于 JavaScript 语言的编程语言，目的是增强 JavaScript 的功能，使其更适合复杂的大型项目。 TS 可以看作是 JS 的超集，在继承了 JS 全部功能的基础上增加了一个独立的类型系统和自己的语法。 类型指具有相同特征的值，一旦确定了值的类型，就可以确定这个值具有该类型的所有特征，可以进行该类型的所有运算。 可以
对 dts 文件以及类型解析的理解 在 ts 项目的根目录下都有一个 tsconfig.json 文件，按照官方的说法当目录中出现了 tsconfig.json 文件，则说明该目录是 TypeScript 项目的根目录。tsconfig.json 文件指定了编译项目所需的根目录下的文件以及编译选项。 tsconfig.json 配置主要分为几类： `json // tsconfig.json { "include":
认识 package.json package.json存在于每个基于node的前端工程化项目中，所以正确的认识该文件中的字段，对理清项目流程、提升工程化能力格外重要 中文文档中翻译的介绍，理解起来仍有难度。简单来说package.json就是一个包（package）描述文件，在node对包内文件进行处理（比如模块类型识别等）时，会按照最近的平级或上级package.json中描述的规则处理，另外package.j
Vue 静态资源处理 vue 项目中使用动态的图片链接是较为常见的需求场景，大部分人应该都遇见过动态链接无效的情况。这篇文章就详细介绍 Vite 中静态资源处理方式以及各种引入方法 基于 webpack 打包的项目中静态资源处理方式与 vite 有部分差别，详情请对照vite 文档-静态资源处理与vue-cli 文档-HTML 和静态资源 因为项目打包后非 public 文件夹中的静态资源会被打包器处
使用 VitePress 搭建文档站点 VitePress是Vue团队提供的一个基于Vue 3与Vite的开源框架，通过MarkDown文档和简单配置就能快速生成静态文档站点。与基于WebPack的VuePress相比，VitePress拥有更快的启动和打包速度 除了支持标准和扩展的md语法外，VitePress还支持在md文档内书写Vue语法，非常适合前端组件库文档或普通技术文档的搭建 如果不想了解完整的使用方式，也可以
VitePress 配置解析 页面中可以通过FrontMatter覆盖配置项 运行完npx vitepress init后会在.vitepress文件夹下生成config.ts文件，vitepress 基础配置均在此文件中完成 可以结合官方文档-Reference以及框架提供的defineConfig API 查看 TS 类型了解配置项的作用以及格式 这里仅对本项目所用到的配置（也是最常用的配置）进行介绍：
实用浏览器工具 需要梯子或者参考离线安装方式 - Ajax Interceptor 拦截网络请求并自定义返回值，可以在开发中快速模拟部分情况 - FeHelper(前端助手) JSON 自动格式化、排序解码等多种实用功能 - Global Speed：视频速度控制 网页中通用的自由设置音视频播放速度 - Octotree - GitHub code tree github
Git 详解 Git 是分布式代码托管的标杆，这里将提供如何学习 Git，以及 Git 工作流的总结，和常用的操作命令 如果要问一本就可以学习 Git 的书或者文章，毫无疑问我会推荐 Git Pro2，绝对是良心之作啊 - Git Pro 2 - Git Pro2 中文 Gitbook - 其它资料 - 99%的时间在使用的 Git 命令 - GIT 分支开发模型规范 -
uniapp中实现全局自定义浮层 业务场景中有许多的全局浮层需求，例如WEB端常见的登录框浮层，带有抢单功能的APP、小程序等 在WEB端可以通过将浮层组件定义在顶层父组件中的方式实现，但uniapp的App.vue中不能写视图元素，也无法使用vue-router的嵌套路由功能，无法以常规方式实现 最简单能想到的方式是在每一个要用到的页面引入组件，并处理相关逻辑 导入可以用easycom规范的组件，省略每个页面的
JS模块化原理 JavaScript在设计之初并没有想到会用于实现复杂的功能，所以没有提供模块化功能。但在逐步的发展中，没有模块化暴露出了很严重的问题： 1. 命名冲突 HTML中通过script标签加载每个脚本，并按顺序执行。所以需要十分小心脚本中的变量名是否与其他脚本冲突 1. 不利于代码拆分 当代码量增加时，拆分文件很有必要。但script标签加载的方式要求每个脚本的书写顺序必须正确，一旦脚本数
Windows实用工具 毫秒级搜索电脑全局文件，还支持搜索文件内容，点击前往官网 在Microsoft Store中下载，可以通过鼠标或快捷键调节多个屏幕的亮度 同国外比较出名的Notion，免费功能够用，点击前往官网 或直接通过我的邀请链接注册 类似的工具很多，例如飞书、语雀等，各有优劣，可以自行比较 插件工具集合，插件市场中有许多实用工具，免费功能够用，点击前往官网 通过快捷键呼出搜索
VSCode插件推荐 名称: Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code ID: MS-CEINTL.vscode-language-pack-zh-hans 名称: Code Spell Checker ID: streetsidesoftware.code-spell-checker 检查单词拼写，错误的拼写会
VSCode设置 VSCode是目前前端最常用的编辑器，优点无需多说。这里记录下我使用过程中让VSCode变得更好用的一些理解 VSCode中的设置分为三级，打开项目后会读取每一级别的设置，小区域级别的设置会覆盖大区域级别的设置 项目 > 工作区 > 用户 也就是项目中.vscode文件夹下的配置文件，需要手动添加，常用的包括： `Markdown - .vscode - settings
Vue3 Provide/Inject 使用指南 Provide 与 Inject API 提供了跨层级传递数据的功能，便于更灵活的组织代码。但这种灵活性也容易伴随着容错性降低，比如： - 注入名称容易拼错，或取名困难 - 需要在代码见反复横跳查看注入的内容 - 有可能意外的注入了同名的内容，导致数据相互覆盖 - 获取的注入未必存在，需要做空值或默认值处理 最简单的注入使用方式为： `ts [fateher.vue] impor
Emmet语法介绍 快速生成HTML结构与CSS代码块的开发工具 点击查看官方文档或语法速查表 语法中html标签、css属性支持缩写，可以在官方仓库中查看。也可以在项目根目录中创建snippets.json文件，添加或覆盖代码片段 - 语法支持嵌套 - 语法不包含空格，会停止解析 - HTML标签名无需是标准标签 - a、img等标签生成后会有默认属性，可以手动添加覆盖默认属性 `HTML )子元素
搭建uniapp通用业务框架 仓库地址：https://github.com/Xaviw/uniapp-template 当前1.0版本仅是根据自身业务需求搭建的一套跨端应用开发框架，本人经验有限，功能与开发体验并没有特别完善，例如没有权限控制功能，没有做全端的兼容性处理等... 开发这个仓库的初衷是让自身业务开发中框架更为易用，以及提升自己逻辑抽离、封装能力。如果业务需求不复杂，可以尝试直接使用本框架。或者同样处在学
封装APP跳转微信小程序支付方法 相比于安卓应用开通第三方支付或苹果应用开通内购支付，会有较复杂的资质要求以及部分手续费。跳转微信小程序页面进行支付是一种更加容易的支付方案 本文介绍个人在使用uniapp中封装APP跳转小程序支付的思路，而不会介绍微信小程序中支付相关使用方法 跳转微信小程序支付，重点在于跳转后检查支付状态。可以在点击支付后全局存储支付ID，因为支付后返回APP会触发onShow，所以在App.vue的
uniapp对比原生小程序 uniapp和原生小程序都有不少的槽点，但相对来说更推荐uniapp uniapp官方文档-选型指南提供了详细的多方对比评测，需要深入了解可以阅读参考 APP端的跨端框架发展迅猛，本文仅针对小程序端进行对比 我个人的看法是：涉及跨端那就是无底的大坑，但uniapp是权衡下还不错的选择 uniapp编写小程序最终是将代码转换为原生小程序 uniapp本身不限制底层API调用，兼容
解决uniapp首页闪烁问题 大部分需要登录的程序在进入时都会先判断用户是否登录，再决定跳转登录页还是首页。uniapp将pages.json中第一项作为项目首页，这也导致了如果登录页作为第一页，用户已登录时就会先显示登录页然后很快跳转到首页，出现页面“闪烁”现象 在APP端提供了启动界面配置，可以将Splash图设置为手动关闭，完成鉴权判断并跳转到正确页面后再关闭Splash图 打开manifest.json
HBuilderX设置 HBuilderX在代码格式化方面与VSCode相差甚远，但没办法还得继续用。所以配置了一套自用基本顺手的配置，保存在仓库HBuilderX-Settings中 - eslint-js - eslint-plugin-vue - prettier - 代码拼写检查器 HBuilderX仅支持根据eslint插件配置的规则进行自动格式化，无法读取项目中的eslint 但是也可以在项目中
