如何在 NuxtJS 中显示时间？

在本文中，我们将学习如何在 NuxtJs 中显示时间。 Nuxt.js 是一个基于 Vue.js、Node.js、Webpack 和 Babel.js 的免费开源 Web 应用程序框架。 Nuxt 的灵感来自 Next.js，这是一个基于 React.js 的类似目的的框架。

方法：为了在 nuxtjs 中显示时间，我们将使用 vue-time 包。 vue-time 包帮助我们在应用程序的任何地方添加时间。所以首先，我们将安装 vue-time 包，然后我们将在我们的插件文件夹中创建一个 vue-time.js 文件，然后我们将在我们的应用程序中添加时间。

创建 NuxtJS 应用程序：

第 1 步：您可以使用以下命令创建一个新的 NuxtJs 项目：

npx create-nuxt-app gfg

第 2 步：现在使用以下命令导航到您的应用程序：

cd gfg

第 3 步：安装所需的软件包。 现在我们将使用以下命令安装 vue-time 包：

npm i vue-time

项目结构：它看起来像这样。

第 4 步：在 plugins 文件夹中创建一个名为“ vue-time.js ”的新文件。创建文件后，在文件中添加以下内容。

vue-time.js

import Vue from 'vue'
import vueTime from 'vue-time'
Vue.component('vue-time', vueTime)

第 5 步：在nuxt.config.js文件的 plugins 部分中添加以下行：

nuxt.config.js

plugins: [
    '@/plugins/view-ui',
    { src: '~/plugins/vue-time', ssr: false },
  ],

第 6 步：现在要在我们的应用程序中添加时间，在 pages 文件夹中的index.vue文件中添加以下行。

索引.vue

  

  export default {
    data() {
      return {
        showDate: false,
        showDay: false,
        showTime: true,
        options: {
          hour12: true,
          era: 'long',
          weekday: 'long',
          year: 'numeric',
          month: 'numeric',
          day: 'numeric'
      }
    }
  }
  }

说明：在上面的例子中，我们首先在 plugin 文件夹中创建了 vue-time 文件，并在 nuxt.config.js 文件中添加了路径。现在我们可以在应用程序的任何地方使用 vue-time 包。要添加我们在 index.vue 文件中使用 组件的时间。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm run dev

输出：