Vue Web 组件构建中未定义的 UIkit答案

【问题标题】：UIkit undefined in Vue web component buildVue Web 组件构建中未定义的 UIkit
【发布时间】：2021-05-14 10:04:56
【问题描述】：

我尝试使用 UIkit 作为 UI 库来构建 Vue Web 组件。使用命令正确构建后：

npm run build --  --target wc --inline-vue --name my-element 'src/App.vue'

当我尝试将组件嵌入其他网站时，UIkit 样式显示正确，但处理模式的 UIkit 实例，下拉列表未定义。

vue.runtime.esm.js:1888 TypeError: Cannot read property 'modal' of undefined

这是我初始化全局 UIkit 变量的 main.js 文件。

import App from "./App.vue"
import wrap from "@vue/web-component-wrapper"
import Vue from "vue"
import VueFlatPickr from "vue-flatpickr-component"
import uk from "uikit"
import Icons from "uikit/dist/js/uikit-icons.js"
import "flatpickr/dist/flatpickr.css"

uk.use(Icons)
Vue.config.productionTip = true
Vue.use(VueFlatPickr)
Vue.mixin({
  data: function() {
    return {
      get uk() {
        return uk
      },
    }
  },
})

const app = new Vue({
  render: (h) => h(App)
})
app.$mount("#app")

const WrapperElem = wrap(Vue, App)
window.customElements.define("my-element", WrapperElem)

下面是我如何使用它以及出现问题的代码示例：

this.uk.modal("#delete-dialog").hide()

【问题讨论】：

标签： vue.js uikit web-component getuikit

【解决方案1】：

我在 discord 频道上看到了您的问题 - 我没有解决您的问题的方法，但是我已经在我的两个项目中成功使用了 UIkit 3 和 Vue 3，希望对您有所帮助：

https://medium.com/@4ravind/uikit-with-vuejs-vue-cli-3-db811e43c46b

【讨论】：