我如何将Vue 3配置外包给Vue 3中的main.js (Vue 3)和Vuetify 3.0.0-beta.4？

Question

我将Vue 3与Vuetify 3.0.0.-beta.4一起使用，我的src/main.js文件如下所示：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// --- VUETIFY - START ---
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        dark: false,
        colors: {
            background: '#FFFFFF',
            surface: '#FFFFFF',
            primary: '#6200EE',
            'primary-darken-1': '#3700B3',
            secondary: '#03DAC6',
            'secondary-darken-1': '#018786',
            error: '#B00020',
            info: '#2196F3',
            success: '#4CAF50',
            warning: '#FB8C00'
        }
      }
    }
  }
})
// --- VUETIFY - END ---

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(vuetify)

app.mount('#app')

代码运行得非常好，但正如您所看到的，这很快就会让人感到困惑。我想将Vuetify部分从src/main，js文件外包到一个单独的文件(src/plugins/vuatefy.js)，但是我的所有努力都没有奏效。

如何将vuetify部分外包到单独的js文件中？

Answer 1

您可以使用导出功能：

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

然后，在您的main.js文件中，导入您的vuetify配置对象并将其传递给vue。