要在 Vue 3 + Vite + TypeScript 项目中全局引用日期处理库，并在列表中渲染格式化后的日期，你可以采取以下步骤：
安装日期处理库（例如 dayjs）：
bash
npm install dayjs
# 或
yarn add dayjs
创建全局工具方法或插件：
你可以创建一个全局的工具方法或在 Vue 应用中注册一个插件来提供日期格式化功能。例如，在 src/utils 目录下创建一个 dateUtils.ts 文件：
typescript代码
// src/utils/dateUtils.ts
import dayjs from 'dayjs';
export function formatDate(date: Date, format: string = 'YYYY-MM-DD HH:mm:ss'): string {
return dayjs(date).format(format);
}
在 main.ts 中引入并使用这个工具方法：
你可以在 main.ts 文件中引入这个工具方法，并将其添加到 Vue 的原型上，以便在组件中可以直接使用：
typescript
// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { formatDate } from './utils/dateUtils';
const app = createApp(App);
// 将 formatDate 方法添加到 Vue 的原型上
app.config.globalProperties.$formatDate = formatDate;
app.mount('#app');
在组件中使用全局方法格式化日期：
现在，你可以在任何组件中通过 this.$formatDate 来访问这个全局方法，并在列表中渲染格式化后的日期：
vue代码
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - {{ $formatDate(item.date) }}
</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
interface Item {
id: number;
name: string;
date: Date;
}
export default defineComponent({
setup() {
const items: Item[] = [
{ id: 1, name: 'Item 1', date: new Date(2023, 0, 1) },
{ id: 2, name: 'Item 2', date: new Date(2023, 0, 2) },
// ... 其他项
];
return {
items
};
}
});
</script>
在上面的组件中，items 是一个包含日期对象的数组。在模板中，我们使用 v-for 指令遍历这个数组，并使用 this.$formatDate(item.date) 来格式化每个项的日期。这样，我们就可以在列表中显示格式化后的日期了。
请注意，这种方式是通过在Vue原型上添加方法来实现全局引用的。虽然这很方便，但也可能导致命名冲突或污染全局命名空间。因此，在大型项目中，你可能需要考虑使用更复杂的插件系统或状态管理库（如 Vuex）来管理这种全局功能。
