Tailwind CSS 解决了哪些问题？1. 传统 CSS 维护困难，Tailwind 提供了更好的组织方式在传统的 CSS 开发模式下，我们通常会创建 全局 CSS 规则，然后在 HTML 或组件中引用这些规则。随着项目的增长，CSS 文件会变得臃肿，选择器的层级会越来越复杂，最终导致 CSS 代码难以维护。
而 Tailwind CSS 采用 原子化 CSS 的思想，即每个类名只做一件事，例如 text-red-500 控制文本颜色，bg-blue-700 控制背景颜色，p-4 控制内边距。这样，开发者不需要为每个组件单独编写 CSS，直接在 HTML 结构上使用类名即可，避免了 CSS 代码的膨胀和管理问题。
2. 组件复用困难，Tailwind 让 UI 组件更可复用在传统的 CSS 方式下，我们可能会为每个 UI 组件单独定义 class，例如：
123456.button { background-color: #3490dc; padding: 8px 16px; border-radius: 4px; font-size: 16px;}
...
在做后台表格页面时，经常遇到用户希望通过多个字段筛选数据的需求。
这种需求一开始看着不难，直接在 filter 里写一堆条件判断就行。但当字段一多，页面复用性一低，代码就容易一团乱麻。所以我干脆封了个小 hooks，叫做 useFilter，来处理这类 多条件筛选。
核心逻辑：封装一个通用的 hooks先看这个 useFilter.ts 文件，结构很简单但很实用：
12345678910111213141516171819202122import {ref} from 'vue';export function useFilter() { const filteredData = ref([]); const isEmpty = (val: any) => val === undefined || val === null || val === ''; const filterData = (data, filters) => { filtered ...
1. 目录结构1234567891011121314151617181920├── src/│ ├── assets/ # 静态资源│ ├── components/ # 组件│ │ ├── base/ # 基础 UI 组件（按钮、输入框等）│ │ ├── business/ # 业务组件（用户卡片、商品卡片等）│ │ ├── common/ # 全局复用组件│ ├── views/ # 视图页面│ ├── store/ # 状态管理│ ├── router/ # 路由│ ├── api/ # API 请求│ ├── utils/ # 工具函数│ ├── config/ # 全局配置│ ├── mock/ # Mock 数据│ ├── hooks/ # 组合式 API 自定义 Hooks│ ├── di ...
1. Element Plus —— 经典稳定，企业项目的首选✅ 优点：
生态成熟，文档详细，社区活跃；
组件丰富，基本涵盖所有常用需求；
上手简单，适合大部分 Vue 项目。
❌ 缺点：
主题定制较麻烦，样式调整不是特别灵活；
组件设计相对保守，风格偏向传统企业级应用。
适用场景：后台管理系统、企业级应用、大型项目。
2. iView Plus —— 颜值在线，但活跃度下降✅ 优点：
组件设计精美，交互体验良好；
API 设计较清晰，上手友好；
适合中后台项目，组件丰富。
❌ 缺点：
维护不太活跃，新特性更新较慢；
生态相对较小，社区支持有限。
适用场景：需要高颜值 UI 的后台管理系统。
3. Ant Design Vue —— 大厂出品，设计规范强✅ 优点：
Ant Design 体系下的 Vue 版本，设计语言统一，适合对 UI 设计要求高的项目；
组件丰富，交互体验优秀；
生态强大，社区维护良好。
❌ 缺点：
组件封装较深，个性化修改成本较高；
体积相对较大，不太适合小型项目。
适用场景：中大型项目、企业级应用、对交互体验要求较高的场景。
4. Naive ...
1、flex布局-设置居中常见的一种方式就是使用 flex布局设置居中。
利用弹性布局(flex)，实现水平居中，其中 justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式
给容器设置：
display: flex 写在父元素上这就是定义了一个伸缩容器
justify-content 主轴对齐方式，默认是横轴
align-items 纵轴对齐方式，默认是纵轴
优点： 简单、方便、快速，三行代码搞定。
1234567891011121314151617<div class="box"> <div class="child">水平垂直居中</div></div><style>.box { width: 200px; height: 200px; border: 1px solid; display: flex; align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中 justify-conten ...
引言在开发一体机项目时，我遇到了一个棘手的问题：由于一体机的特殊性，其界面样式基于移动端设计，但浏览器内核仍属于 PC 端。因此，内部元素既要支持移动端的 touch 事件，又要兼容 PC 端的 mouse 事件。
实现思路为了让鼠标滚轮能够控制水平滚动，我们可以监听 wheel 事件，并根据滚动方向调整 scrollLeft 值。
123456const onWheel = (e: any) => {const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))const target = e.currentTarget as DraggableElement | nullif (target) target.scrollLeft -= delta * 450e.preventDefault()}
onWheel 函数接收一个事件对象 e。计算滚轮滚动的方向和幅度，结果保存在 delta 变量中。获取触发事件的目标元素 target，并将其类型断言为 DraggableElement。如 ...
