Nuxtjs导入vue组件

Question

我是nuxtjs的新手，我正在尝试将vue组件导入nuxt。

我在我的项目中使用vuetify，我想使用这个插件https://vuejsexamples.com/date-range-picker-for-vuetify-js/，它是一个日期范围选择器。

我已经使用npm添加了组件。

我的nuxt.config.js看起来像这样：

...

// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
  { src: '~/node_modules/vuetify-daterange-picker/dist/vuetify-daterange-picker.css' }
],

// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [

],

// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,

// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
  // https://go.nuxtjs.dev/eslint
  //'@nuxtjs/eslint-module',
  // https://go.nuxtjs.dev/vuetify
  '@nuxtjs/vuetify',
  '~/node_modules/vuetify-daterange-picker'
],

// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
  // https://go.nuxtjs.dev/axios
  '@nuxtjs/axios',
  // https://go.nuxtjs.dev/pwa
  '@nuxtjs/pwa',
  // https://go.nuxtjs.dev/content
  '@nuxt/content',
],

// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},

// Content module configuration (https://go.nuxtjs.dev/config-content)
content: {},
...

当我运行我的项目时，我在浏览器中得到了这个错误

​

终端中的这个错误

​

Answer 1

请不要手动从"node_modules“导入组件。

你必须创建一个新的Nuxt“插件”来导入和初始化Nuxt中的vue组件：

// plugins/your-component.js

import VuetifyDaterangePicker from "vuetify-daterange-picker";
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css";

Vue.use(VuetifyDaterangePicker);

// nuxt.config.js

export default {
  plugins: ['~/plugins/your-component.js'],
  // ...
}

请参阅文档：https://nuxtjs.org/docs/2.x/directory-structure/plugins#vue-plugins

另一种方法是使用nuxt vuetify-module：https://github.com/nuxt-community/vuetify-module