javascript - 在 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 option ，默认情况下，您的 Nuxt.js 应用程序将仅使用所需的 vuetify 组件，并且包大小不会增加。

Uses vuetify-loader to enable automatic tree-shaking. Enabled only for production by default.

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

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

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