使用Vue 3渲染功能与vuetify 3 beta

hmmo2u0o  于 2023-03-19  发布在  Vue.js
关注(0)|答案(1)|浏览(183)

大家好,我有一些问题,我相信它来自Vite编译器,我使用VUE 3 & Vite与Vuetify 3测试版,我需要使用渲染功能与Vuetify,但每次我试图导入Vuetify组件,我得到这个错误

但文件确实存在
下面是我的代码:RenderFunc.js

<script>
import { h } from "vue";

import { VCard } from 'vuetify/lib/components';
export default {
  props: {
    level: {
      default: 1
    }
  },
  setup({ level }, { slots }) {
    return () => h(VCard, 'hello')
  }
};
   </script>

这是我的Vite配置,我相信可以修复它

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
        vue(),
        vuetify({ autoImport: true }),
],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

这是我的Main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { createPinia } from 'pinia'
import { loadFonts } from './plugins/webfontloader'

loadFonts()
createApp(App)
  .use(router)
  .use(vuetify)
  .use(i18n)
  .use(createPinia())
  .mount('#app')

这是我的vuetify插件文件

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme:{
    themes:{
      light:{
        colors:{
          background: '#F9F9F9'
        }
      }
    }
  }
}
)

所以任何人都可以帮助我如何找到解决方案

2admgd59

2admgd591#

修复了我自己的问题,整件事都是关于Vuetify组件在src/plugins/vuetify.js中的导入路径
我刚刚用了

import * as components from 'vuetify/components'

代替

import * as components from 'vuetify/lib/components'

希望对你也有帮助

相关问题