Day03 Vue3

### 集成 Day.js 到 Vue 3 为了在 Vue 3 中集成并使用 `day.js` 来处理日期和时间，需遵循特定步骤来安装库以及配置项目以便能够方便地调用该库的功能。 #### 安装 Day.js 通过命令行工具，在 Vue 3 项目的根目录下执行如下 npm 命令完成 day.js 的安装： ```bash npm install dayjs ``` 这一步骤确保了 day.js 成为项目依赖的一部分[^3]。 #### 在 Main.js 中引入与挂载 为了让整个应用程序都能访问到 day.js 提供的方法而无需每次都重新导入模块，可以在入口文件 `main.js` 或者 `main.ts`(如果采用 TypeScript)里做全局注册。具体实现方式是在创建 Vue 实例之前加入下面几行代码： ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; // 导入 dayjs 并将其绑定至原型链上作为实例属性 $dayjs import dayjs from &#39;dayjs&#39;; const app = createApp(App); app.config.globalProperties.$dayjs = dayjs; app.mount(&#39;#app&#39;); ``` 上述代码片段展示了如何使 `$dayjs()` 函数成为所有组件内部可用的一个便捷函数。 #### 组件内的使用案例 一旦完成了以上设置工作，则可在任意单文件组件(SFCs)内直接利用此功能来进行日期格式转换或其他相关操作。例如在一个名为 `<template>` 的模板标签中的表达式或计算属性中这样写： ```html <template> <div>{{ formattedDate }}</div> </template> <script setup> import { ref, computed } from &#39;vue&#39;; let rawDate = new Date(); // 获取当前时间戳对象 const formattedDate = computed(() => { return this?.$dayjs(rawDate).format(&#39;YYYY-MM-DD HH:mm:ss&#39;); }); </script> ``` 这里定义了一个响应式的变量 `formattedDate` ，它会依据原始日期自动更新显示经过美化后的字符串形式[^2]。