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

项目结构： 它将如下所示。

NuxtJS 如何显示时间

步骤4： 在插件文件夹中创建名为“ 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： 现在，在我们的应用程序中添加时间，请将以下行添加到 index.vue 文件中，位于pages文件夹中。

index.vue

<template> 
  <div> 
    <h4>GeeksforGeeks - NuxtJs Time</h4> 
    <vue-time :show-date="showDate" : 
               show-day="showDay" : 
               show-time="showTime"></vue-time> 
  </div> 
</template> 
  
<script> 
  export default { 
    data() { 
      return { 
        showDate: false, 
        showDay: false, 
        showTime: true, 
        options: { 
          hour12: true, 
          era: 'long', 
          weekday: 'long', 
          year: 'numeric', 
          month: 'numeric', 
          day: 'numeric'
      } 
    } 
  } 
  } 
</script>