引言我在这里记录了自己实现了一些常用 Hooks, 包括小程序框架这种, 用来提高日常的开发速度. 单独在这里记录是因为会使用到 Taro, 直接实现包可能导致无法正常使用; 如果需要, 你可以直接复制对应 Hook 的源代码进行使用. 如果可以的话, 希望你可以保留对应的作者注释, 即便我看不到, 我也会很开心 😸 通用useAsyncEffect允许您直接在 useEffect 中, 直接使用 async/await 语法. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283import { useEffect, useRef } from "react";import type { DependencyList } from "react ...

引言WebStorm 真的是一个非常好用的前端开发工具, 不过有的时候会很卡, 这里我总结了几种优化的方式. 调整内存大小直接在这里就可以调整内存的大小: 一般来说, 调整到 4 GB 以上就行. 关闭 document 提示这里的提示不是代码提示, 而是通过网络获取的一些提示. 国内的网络又不是很好, 所以最好直接关闭. 关闭 Code Version这个就是告诉你, 这个函数谁用到了, 这个组件谁用到了. 不过它也会很吃性能, 可以关掉来提升性能: 至此, WebStorm 的使用体验就会很好了.

项目功能和技术栈这是为了校园 E 站项目, 制作的一个管理后台项目. 功能集成了用户管理, 文章管理 (文章列表和校园主题管理), 学期管理以及设置. 该项目使用的技术栈如下: Vue3 TypeScript Pinia Element Plus axios Vue Router Vite 项目展示 部署地址: 校园E站 管理后台 Github 地址: ezhan-admin-vue 由于权限问题, 不提供账户密码.

引言为什么要学当下这个 AI 时代，大部分的 AI 程序都是基于 Tailwind CSS 进行开发构建的。而且这个东西可以帮助我们提升开发效率，减少做轮子的流程。 常见问题【初中级】有了解过哪些样式实现方案？为什么 AI 产品都选择 Tailwind CSS 作为样式方案？ 【中高级】说说 Tailwind CSS 工程初始化、内核、工具类体系完整内容，详细说明在业务、组件库等场景的应用。 【专家级】站在前端架构师的角度，详细说说 Tailwind CSS 的框架的优势和原理，如何从零到一构建 Tailwind 及相关组件库生态。 为何推荐 Tailwind CSS主流样式体系方案手写原生 CSS & CSS 预处理器这是最直接的方式，开发者直接手动编写 css 文件，通过 link 标签进行引入使用。 痛点：随着项目变大，很快就会面临命名冲突、代码冗余、难以维护等问题，即 CSS 全局命名空间污染。 解决方案： CSS 预处理器（Sass/Less）：引入了变量、嵌套、混入（Mixin）、继承等编程概念，增强了 CSS 的组织性和可复用性，但并未从根本上解决命名 ...

什么是 Jest Jest 是一个前端单元测试框架, 由 Facebook 退出, 是目前前端最火热的框架. 它具有以下特点: Fast 天下武功, 唯快不破 Opinionated 开箱即用 Watch Mode 守护模式 Shapshot Testing 快照测试 基础使用这里首先创建一个前端项目, 这里直接 yarn init 一个出来. 随后, 在项目中安装 jest: 1yarn add jest -D 这里从一个最简单的函数开始, 直接创建一个 math.js 工具文件出来, 并且写入以下代码: 123const mySum = (a, b) => a + bexport {mySum} 随后就可以创建测试文件了. 测试文件需要使用 .test.js 结尾. 一般来说, 我们创建 文件名.test.js. 1234567const mySum = require('./math')// 直接使用 test函数, 全局可用的APItest("这里写描述信息, 用来测试1 + 2 = 3", () =&g ...

引言 Story 在我看来, 真的是一个特别好看, 特别方便的组件库, 或者其他文档生成的工具, 因为之前的各种组件库文档其实都是静态的, 只会提供什么长什么样, 不会直接允许修改. 但是这个 StoryBook, 就实现了类似的功能. 快速上手首先, 我们需要创建一个项目, 比如: 1yarn create vite 然后创建一个 Vue 3 的项目. 随后, 进入项目, 并且初始化一下 storybook: 1npx sb init 确实, storyBook 的简写就是 sb, 华纳兄弟啊; 无论如何, 这里它会自动识别你的仓库是什么项目, 并且进行对应的初始化. 初始化结束, 可以看到目录: 这里上面的是配置文件, 我们几乎不需要进行配置; 只需要观察下面的 stories 目录即可. 其实就是对应的 Vue 组件加上一个 组件名.stories.ts, 那么这就好办了. 这里直接假设, 我们要把默认生成的 HelloWorld 组件加入到 stories 里面, 就可以创建一个同级的文件: 随后, 这里就需要注意了, 一个 story 的文件有一些必要的内容: ...

引言介绍随着 Vue 的开发, 前端也出现了一个更加方便, 速度更加快速的框架: Vite. Vite 有如下一些特点: 开发时效率极高 开箱即用, 功能完备 社区丰富, 兼容 rollup 超高速热重载 预设应用和类库打包模式 前端类库无关 Vite 的速度不会随着项目规模的变大而改变, 可以显著提升我们的开发效率. 构建, 是前端逃不开的话题, 现代的前端框架已经不是一个 HTML 加一个 JS 就能跑的东西了. 不管用的是 Vue 还是 React, 本质上都是构建. 学习构建, 就是提升自己. Vite 是什么其实就是各种高阶构建工具的封装. 其中用的最多的就是 rollup, 起初可以认为是为了 Vue 3 来服务的, 但是后来已经成为了一个独立于前端框架的工具, 能够为各种前端进行服务. 引用站外地址 Vite 官方文档 Vite 的目标就是 使用简单 , 帮助我们封 ...

什么是 Monorepo英文全称其实是 Monolithic Repository, 即单一仓库方案. 将多个项目整合在一个仓库中, 让这些仓库可以公用一些通用的东西. 优势 便于代码和依赖在多个项目之间的 共享. 更方便简单的项目版本控制. 可以分别控制大项目和小项目的版本. 提高多项目的构建与部署的便捷性. 提高代码的复用性和团队协作的便利性. 应用 项目的子项目架构, 一个大项目的几个小部分进行分开管理, 提升效率 对于工具分类分装的架构 对于复杂且丰富的应用需求的功能切片 仓库项目管理的发展历程 单体仓库单应用 - Monolith 即一个仓库管理一个单应用. 随着项目的功能迭代, 单体应用的规模会逐渐变大, 难以维护. 多仓库多应用 - Multirepo 多个应用分配给多个对应的仓库进行管理 缺点: 无法进行项目依赖与代码的共享. 单仓库多应用 - Monorepo 一个仓库管理多个应用 优点: 业务代码分离解耦, 应用间共享依赖与代码, 项目配置和构建部署, 项目扩展更方便. 创建 Monorepo 仓库首先, 创建一个文件夹, 这个文件夹就是我们的 m ...

目标&最终效果 分享页面 分享导出的图片 在微信小程序中, 点击生成海报图片, 能够生成如上图片, 并且保存到本地. 解决方案心路历程一开始, 本来是想要使用 html 2 canvas 这个库的. 引用站外地址 html 2 canvas JavaScript 截图工具 无论如何, 经过一番查询后得出: 这个库需要获取 DOM 元素, 但是微信小程序中, 我们无法正常的获取 div 之类的 DOM 元素. 因此, 该方案 pass. 随后, 查询到了可以使用 canvas 进行绘制, 但是考虑到页面元素过于复杂, 如果需要一个个的绘制, 并且考虑兼容性的话, 这将是一个特别特别大的工程, 甚至比绘制整个课表都要复杂得多. 最后, 经过了一整晚几个小时的探索, 我找到了一个符合当前需求的东西: Snapshot. 配置环境这个组件是 微信小程序 中, 用来 ...