文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Vue 3渲染功能和vuetify 3β

问使用Vue 3渲染功能和vuetify 3β
EN

Stack Overflow用户

提问于 2022-08-12 16:20:21

回答 1查看 438关注 0票数 1

你好，每个人都有一些问题，我想是来自Vite编译器，我使用vue 3& vite和vuetify 3 beta，我需要使用呈现函数和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 Config，我相信它被修复了

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')

这是我的虚拟插件文件

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

// Vuetify
import { createVuetify } from 'vuetify'

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

所以任何人都能帮我找到解决办法

vue.js

vuejs3

vuetifyjs3

vue-render-function

回答 1

Stack Overflow用户

发布于 2022-08-13 03:32:43

你好，每个人，我解决了我自己的问题，洞的事情是关于我的src/plugins/vuatefy.js中的任何一条通往Vuetify组件的路径。

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

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

安装这个

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

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

希望能对你和我的未来有所帮助

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73337086

复制

相似问题

问使用Vue 3渲染功能和vuetify 3β
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Vue 3渲染功能和vuetify 3βEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Vue 3渲染功能和vuetify 3β
EN