如何在 NuxtJS 中添加 DatePicker？

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

方法：要添加我们的 DatePicker，我们将使用 vuejs-datepicker 包。 vuejs-datepicker 包可帮助我们在应用程序的任何位置添加 DatePicker。所以首先，我们将安装 vuejs-datepicker 包，然后我们将在我们的插件文件夹中创建一个 vue-datepicker.js 文件，然后我们将在我们的应用程序中添加 datepicker。

创建 NuxtJS 应用程序：您可以使用以下命令创建一个新的 NuxtJs 项目：

npx create-nuxt-app gfg

安装所需的包：现在我们将使用以下命令安装 vuejs-datepicker 包：

npm i vuejs-datepicker

项目结构：看起来像这样

添加 DatePicker：要添加我们的 datepicker，我们必须按照以下步骤操作：

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

Javascript

import Vue from 'vue'
import Datepicker from 'vuejs-datepicker'
Vue.component('date-picker', Datepicker)

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

nuxt.config.js

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

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

索引.vue

  

  export default {
    data() {
      return {
        date_today:new Date()
      }
    }
  }

说明：在上面的示例中，我们首先在插件文件夹中创建了 vue-datepicker 文件，并在 nuxt.config.js 文件中添加了路径。现在我们可以在应用程序的任何地方使用 datepicker 包。为了添加日期选择器，我们在 index.vue 文件中使用了 组件。

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

npm run dev

输出：