Vue 3 项目初始化配置 Day.js 的核心是安装、按需扩展插件、统一工具函数导出；推荐在入口或 utils/dayjsSetup.ts 中引入 locale 和插件并 extend，再通过 src/utils/date.ts 导出 formatDate 等类型友好函数供组件直接导入使用。
Vue 3 项目初始化时配置 Day.js，核心是三件事：安装、按需扩展、统一接入方式。不建议直接在每个组件里 import dayjs 再调用，那样重复多、插件难统一、类型提示弱。推荐从项目入口层封装起步，兼顾轻量、可维护和 TypeScript 友好性。
安装与基础引入
在项目根目录执行安装命令：
- npm install dayjs（推荐）
- 或 yarn add dayjs、pnpm add dayjs
安装后无需额外 polyfill，Day.js 原生支持 ES 模块，可直接在 src/main.ts（或 main.js）中导入：
import dayjs from 'dayjs'语言与常用插件按需加载
中文显示、相对时间、时区处理等能力默认不内置，需显式引入并 extend。建议在入口文件或单独的日期配置文件（如 src/utils/dayjsSetup.ts）中集中管理：
- 导入中文语言包：import 'dayjs/locale/zh-cn'，再调用 dayjs.locale('zh-cn')
- 启用高频插件（只加你真要用的）：
import relativeTime from 'dayjs/plugin/relativeTime'
import timezone from 'dayjs/plugin/timezone'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
dayjs.extend(relativeTime)
dayjs.extend(timezone)
dayjs.extend(isSameOrAfter)
⚠️ 注意：插件必须在使用前 extend，且全局只需执行一次。
全局挂载 or 工具函数导出？推荐后者
虽然可以在 main.ts 中通过 app.config.globalProperties.$dayjs = dayjs 挂载，但 Composition API 下 this 不可用，且 TS 类型需额外声明，维护成本高。更现代的做法是：
- 新建 src/utils/date.ts，导出封装好的工具函数：
export const fromNow = (date: string | number | Date) => dayjs(date).fromNow()
export const isToday = (date: string | number | Date) => dayjs(date).isSame(dayjs(), 'day')
- 组件中直接解构使用：import { formatDate, fromNow } from '@/utils/date'
- 搭配 TypeScript 接口，自动获得参数和返回值提示，无须任何 shims 声明
可选：添加类型增强（TS 项目）
若坚持全局挂载且用 Options API，需在 src/shims-vue.d.ts 补充：
declare module '@vue/runtime-core' {interface ComponentCustomProperties {
$dayjs: typeof import('dayjs')
}
}
但对纯 Composition API 项目，这步可跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
