如何在我的自定义 vue 插件中使用"Vue 插件组件"



我正在尝试在我创建的自定义 vue 插件中使用 vuetify 组件,但似乎我的插件在应用程序"知道"vuetify 存在之前渲染。

我尝试在我的插件中使用 Vue.use(Vuetify(,但它不起作用,基本上,在我的插件中使用它没有意义,因为我希望插件用户(开发人员(将 Vuetify 用作他的应用程序中的全局依赖项,以便它可以渗透到我的插件

这是我的插件的 Vue HTML 模板:

<v-content>
      <v-container fluid fill-height>
        <v-layout justify-center>
        <div v-if="videoLoading">
          <v-progress-circular v-if="useVuetifyLoader"
            :size="size"
            :width="width"
            :rotate="rotate" 
            :value="videoLoadingProgress*1.5"
            :color="color"
          >
            Downloading...
            {{ `${loadedInMB}/${totalInMb}Mb` }}
          </v-progress-circular>
          <div v-else>
              Downloading...
              {{ `${loadedInMB}/${totalInMb}Mb` }}
          </div>
        </div>
        <div v-else>
          <div>
            <div>foo</div>
          </div>
        </div>
      </v-layout>
    </v-container>
  </v-content>

这是我的插件:

import MyPlugin from '../lib/MyPlugin.vue';
import Vuetify from 'vuetify'

const install = function (Vue, config) {
Vue.component("my-plugin", MyPlugin)
}


export { install }
*and i tried also :*

 import MyPlugin from '../lib/MyPlugin.vue';
    import Vuetify from 'vuetify'

    const install = function (Vue, config) {
    Vue.use(Vuetify)// <-- did not work
    Vue.component("my-plugin", MyPlugin)
    }


    export { install }

当我在其他应用程序中实现我的插件时,我收到以下错误:

Unknown custom element: <v-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option
 Unknown custom element: <v-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Unknown custom element: <v-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Unknown custom element: <v-progress-circular> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

如何像这样设置您的插件并在其中包含自定义组件:

export default {
  install (Vue, options) {
     Vue.anyMethodYouLike = (value) => value
     Vue.component('v-content', Component);
     // Add `Vue.mixin()` to inject options to all components.
     Vue.mixin({
         // Add component lifecycle hooks and/or properties.
         created() {
         }
     });
     // We can also add Vue instance methods by attaching them to Vue.prototype.
     Vue.property.$myProperty = 'This is a Vue instance property.'
  }
}

然后在您的应用中使用,例如:

import myPlugin from './plugin.js' // the file with the code above
Vue.use(myPlugin, {
  someProp: 'blahdy blah'  //options to pass
})

好的,所以我弄清楚了。我所要做的就是将 Vuetify 作为选项对象中的参数传递,然后我可以在插件文件中使用 Vue.use(my_vuetify_param( 使用它

最新更新