数据处理 → Lodash-es        日期处理 → Day.js
HTTP 请求 → Axios           组合式工具 → VueUse
UI 组件 → Element Plus      图表 → ECharts
表单校验 → VeeValidate      拖拽排序 → SortableJS
虚拟滚动 → vue-virtual-scroller    富文本 → TipTap

import {
  cloneDeep,    // 深拷贝, 前端的 BeanUtils 加强版
  debounce,     // 防抖: 停止触发 N 毫秒后才执行 (搜索框标配)
  throttle,     // 节流: N 毫秒内最多执行一次 (滚动事件标配)
  groupBy,      // 分组, 相当于 Stream 的 Collectors.groupingBy
  orderBy,      // 多字段排序
  uniq,         // 去重
  pick, omit    // 挑选/排除对象属性
} from 'lodash-es'

const search = debounce(keyword => fetchList(keyword), 500)   // 用户停手 500ms 才真发请求

const grouped = groupBy(users, 'role')          // { admin: [...], user: [...] }
const sorted = orderBy(users, ['age', 'name'], ['desc', 'asc'])
const safe = omit(user, ['password'])           // 传给日志前把敏感字段摘掉

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'   // 插件机制: 核心极小, 功能按需挂
import 'dayjs/locale/zh-cn'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

dayjs().format('YYYY-MM-DD HH:mm:ss')       // 格式化
dayjs('2026-01-15').add(7, 'day')           // 日期运算
dayjs().startOf('day')                      // 今天 00:00:00
dayjs('2026-01-20').diff('2026-01-15', 'day')  // 差值: 5
dayjs(post.createdAt).fromNow()             // "3 小时前", 评论区标配

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({ endTime: String })
const countdown = ref('')
let timer = null

function update() {
  const diff = dayjs(props.endTime).diff(dayjs(), 'second')
  if (diff <= 0) {
    countdown.value = '已结束'
    clearInterval(timer)
    return
  }
  const d = Math.floor(diff / 86400)
  const h = Math.floor((diff % 86400) / 3600)
  const m = Math.floor((diff % 3600) / 60)
  countdown.value = `${d}天 ${h}小时 ${m}分 ${diff % 60}秒`
}

onMounted(() => {
  update()
  timer = setInterval(update, 1000)
})
onUnmounted(() => clearInterval(timer))   // 忘了这行就是内存泄漏
</script>

<template>
  <div>{{ countdown }}</div>
</template>

// 业务代码里永远只碰封装后的 api 模块, 不直接 import axios
import { userApi } from '@/api/user'

const users = await userApi.getList({ page: 1, size: 10 })

<script setup>
import { useClipboard, useLocalStorage, useOnline, useWindowSize } from '@vueuse/core'

const token = useLocalStorage('token', '')   // 响应式 localStorage: 赋值自动存, 多标签页还同步
const { width } = useWindowSize()            // 窗口宽度, 变了自动更新
const online = useOnline()                   // 断网检测
const { copy, copied } = useClipboard()      // 一键复制 + 复制成功状态
</script>

<template>
  <button @click="copy('要复制的内容')">{{ copied ? '已复制' : '复制' }}</button>
  <p v-if="!online">网络断了</p>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chart = null

onMounted(() => {
  chart = echarts.init(chartRef.value)     // 必须等 DOM 挂载后才能 init
  chart.setOption({
    xAxis: { data: ['1月', '2月', '3月'] },
    yAxis: {},
    series: [{ type: 'bar', data: [5, 20, 36] }]
  })
  window.addEventListener('resize', chart.resize)
})

onUnmounted(() => {
  window.removeEventListener('resize', chart.resize)
  chart?.dispose()                          // 图表实例不销毁也是内存泄漏
})
</script>

<template>
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>

import * as yup from 'yup'

const schema = yup.object({
  email: yup.string().required('邮箱不能为空').email('邮箱格式不正确'),
  age: yup.number().min(18, '未满 18')
})