在 Nuxt.js 中导入单个 Vuetify 组件？

Question

我在 nuxt.js 中使用 Vuetify。 如何仅在仪表板布局中使用它？ 在 nuxt.config.js

 modules: [
        //['nuxt-leaflet', { /* module options */}],
        'bootstrap-vue/nuxt',
        '@nuxtjs/axios',
        '@nuxtjs/pwa',
        '@nuxtjs/auth',
        '@nuxtjs/toast',
        ['@nuxtjs/vuetify', {rtl: true}],
        // 'nuxt-i18n',
    ],

Answer 1

你在使用vuetify-loader和tree-shaking吗？ 如果是这样，您可以将特定的 vuetify 组件导入特定.vue组件：

import { VTextField } from 'vuetify/lib';

并添加：

components: { VTextField }

根据@nuxtjs/vuetify模块文档，如果您使用treeShake选项，默认情况下，您的 Nuxt.js 应用程序将仅使用所需的 vuetify 组件，并且包大小不会增加。

使用vuetify-loader启用自动tree-shaking 。 默认情况下仅对生产启用。

另一件事，如果您使用Nuxt >= 2.9.0 ，请改用 buildModules 部分：

{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}

Answer 2

如果您使用的是NuxtJS Vuetify 模块（似乎是），我假设您的package.json没有列出vuetify ，因为它是导入它的@nuxtjs/vuetify 。 因此，您不能仅使用模块名称来导入它。 我建议您使用它的完整路径导入它，如下所示：

import { VCard } from '~/node_modules/vuetify/lib';

然后注册组件，当然。