写在前面
本文为 Vue3+Vite 项目实战系列教程文章第五篇，系列文章建议从头观看效果更佳，大家可关注 Vue3 实战系列 防走失！点个赞再看有助于全文完整阅读！
此系列文章主要使用到的主要技术站栈为 Vue3+Vite，那既然是 Vue3，状态库我们使用的是 Pinia 而不是 Vuex，在写法上也肯定是以 CompositionAPI 为主而不是 OptionsAPI，组件库方面我们使用的是 ArcoDesign （赶紧丢掉 ElementUI 吧！）。
- 这是一份保姆级Vue3+Vite实战教程 - 介绍
Vue3+Vite项目的搭建以及项目上的一些配置。 - 保姆级Vue3+Vite项目实战多布局（上） - 介绍多布局实现思路以及默认布局搭建。
- 保姆级Vue3+Vite项目实战多布局（下） - 介绍边栏布局实现以及动态布局切换。
- 保姆级Vue3+Vite项目实战黑白模式切换 - 项目中的黑白（浅色/暗色）模式切换
终于到了写正经项目代码了，那之前也说过，第一个小功能我们写正则校验工具，因为平常写正则老是找在线的校验工具测试，所以就想着自己写一个，以后每次写的正则都补充到在线工具里，慢慢的积攒的多了，也能少写一点点（其实还是因为懒）。