如何在VueJS中使用Date-FNS？示例代码运行求助

Hey there! Glad you're diving into Date-FNS with Vue.js—let's get those examples up and running smoothly. Here's a straightforward breakdown:

1. First, Install Date-FNS #

Before using any Date-FNS functions, you need to add the library to your Vue project. Open your terminal and run either of these commands depending on your package manager:

# Using npm
npm install date-fns

# Using yarn
yarn add date-fns

2. Use Date-FNS in a Vue Component #

You can import and use Date-FNS functions directly in your Vue components. Below are examples for both Vue 2 and Vue 3, since the syntax differs slightly.

Vue 2 Example (Options API) #

Create a single-file component (e.g., DateFnsDemo.vue) with the following code:

<template>
  <div class="date-demo">
    <p>{{ formattedToday }}</p>
    <p>{{ daysAgoText }}</p>
    <p>{{ relativeDateText }}</p>
  </div>
</template>

<script>
// Import the specific functions you need (tree-shakable!)
import { format, formatDistance, formatRelative, subDays } from 'date-fns';

export default {
  name: 'DateFnsDemo',
  computed: {
    formattedToday() {
      // Returns something like "Today is a Wednesday"
      return format(new Date(), '[Today is a] dddd');
    },
    daysAgoText() {
      // Returns "3 days ago"
      return formatDistance(subDays(new Date(), 3), new Date());
    },
    relativeDateText() {
      // Returns something like "last Friday at 7:26 p.m."
      return formatRelative(subDays(new Date(), 3), new Date());
    }
  }
};
</script>

Vue 3 Example (Script Setup) #

If you're using Vue 3's <script setup> syntax (the recommended approach for Vue 3), here's a simplified version:

<template>
  <div class="date-demo">
    <p>{{ formattedToday }}</p>
    <p>{{ daysAgoText }}</p>
    <p>{{ relativeDateText }}</p>
  </div>
</template>

<script setup>
import { format, formatDistance, formatRelative, subDays } from 'date-fns';

// Compute values directly (no need for computed properties unless you need reactivity)
const formattedToday = format(new Date(), '[Today is a] dddd');
const daysAgoText = formatDistance(subDays(new Date(), 3), new Date());
const relativeDateText = formatRelative(subDays(new Date(), 3), new Date());
</script>

3. Optional: Global Registration (For Cross-Component Use) #

If you want to use Date-FNS across multiple components without importing the functions every time, you can register it globally.

Vue 2 Global Setup #

In your main.js file:

import Vue from 'vue';
import * as dateFns from 'date-fns';

// Attach Date-FNS to Vue's prototype
Vue.prototype.$dateFns = dateFns;

Then in any component, use it like this:

this.$dateFns.format(new Date(), '[Today is a] dddd');

Vue 3 Global Setup #

In Vue 3, you can use a plugin to add it globally:

import { createApp } from 'vue';
import App from './App.vue';
import * as dateFns from 'date-fns';

const app = createApp(App);
app.config.globalProperties.$dateFns = dateFns;
app.mount('#app');

Then in a component (Options API):

this.$dateFns.format(new Date(), '[Today is a] dddd');

Or in <script setup>:

import { getCurrentInstance } from 'vue';
const app = getCurrentInstance();
app.appContext.config.globalProperties.$dateFns.format(new Date(), '[Today is a] dddd');

Note: Local imports are generally preferred because they allow tree-shaking, which reduces your final bundle size by only including the functions you actually use.

Bonus: Locale Support (If Needed) #

If you want to display dates in a non-English language, import the relevant locale and pass it as an option to the functions:

import { format, formatRelative, subDays } from 'date-fns';
import { fr } from 'date-fns/locale'; // French locale

// Example: Format relative date in French
formatRelative(subDays(new Date(), 3), new Date(), { locale: fr });

That's it! Your Date-FNS examples should now work perfectly in Vue.js.

内容的提问来源于stack exchange，提问作者Tom