03 2025 档案
摘要：在 Tailwindcss 里面包含了大量的原子类，但是在实际开发中，我们并不是说所有的原子类都会用到，因此在最终构建 css 的时候我们应该将没有使用到的原子类进行删除操作，从而优化我们的构建产物。 tree shaking 这里在 tailwindcss 里面要进行 tree shaking 操
阅读全文
摘要：在 tailwindcss 里面，要开启夜间模式，非常非常简单，只需要使用 dark: 变体即可，dark: 后面跟上原子类，表示夜间模式下面需要应用的原子类。 例如： <body class="bg-gray-100 dark:bg-gray-900"></body> 在上面的代码中，如果是白天模
阅读全文
摘要：## 响应式断点 *Tailwind CSS* 默认提供了一组预设的断点，即屏幕尺寸范围，用于管理响应式样式。默认的断点包括： - *sm*: *640px* 及以上- *md*: *768px* 及以上- *lg*: *1024px* 及以上- *xl*: *1280px* 及以上- *2xl*:
阅读全文
摘要：在前面的学习中，我们发现很多时候一些标签所应用的原子类是一样的。例如： <div class="float-left text-center flex items-center bg-blue-100 block"></div> <div class="float-left text-center
阅读全文
摘要：TailwindCSS中是允许我们自定义插件和组件的。需要注意一下两者之间的区别，插件一般指的是实现某一个具体的功能，组件一般是指封装了一段公共的代码。 自定义插件 要创建一个自定义插件，非常的简单，只需要在 tailwindcss 的配置文件中配置 plugins 配置项，该配置项对应的是一个数组
阅读全文
摘要：自定义主题 在开始本小节的实战之前，我们先来介绍一下 Tailwind CSS 中如何自定义主题。 在 Tailwind CSS 中，虽然提供了大量预设样式，但有时您可能需要自定义样式以满足特定需求。Tailwind 提供了多种方法来自定义样式，包括扩展现有配置、添加新配置、编写自定义 CSS 和创
阅读全文
摘要：<template> <div> <input type="text" v-bind="$attrs" /> </div> </template> <script setup lang="ts" > // by default when you pass props to the component
阅读全文
摘要：export function singleton< T extends new (...args: any[]) => object >(classCtor: T): T { let instance!: InstanceType<T> const proxy = new Proxy(classC
阅读全文
摘要：The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. z.custom allows the creation of a br
阅读全文
摘要：Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concep
阅读全文
摘要：The Vendor Wrapper Pattern is about isolating a third-party (vendor) library behind your own abstraction. Instead of scattering vendor-specific API ca
阅读全文
摘要：optimization optimization这个配置项内部的很多优化策略都是在生产环境默认开启的，启用这些规则从一定程序上来讲可以显著减少 bundle 体积，优化代码生成，帮助长期缓存等。 optimization.minimize optimization.minimize指定 webpa
阅读全文
摘要：代码准备 由于需要演示webpack的一些优化处理，因此代码提前做了一些处理， 引入了vue-router路由，创建了几个view页面 引入了element-plus，axios，echarts，vue-echarts，@vueuse等组件丰富页面展示 引入了unplugin-vue-compone
阅读全文
摘要：esbuild自定义插件 插件开发其实就是基于原有的体系结构中进行扩展和自定义。 Esbuild 插件也不例外，通过 Esbuild 插件我们可以扩展 Esbuild 原有的路径解析、模块加载等方面的能力，并在 Esbuild 的构建过程中执行一系列自定义的逻辑。 esbuild 插件是一个带有na
阅读全文
