如何在PrimeVue中使用CustomElements？
我有一个Vue 3自定义元素，其中我想使用PrimeVue和PrimeFlex等。因此，我首先创建一个组件，使用.ce.vue扩展的证监会模式，并使用defineCustomElement和customElements.define的组合，将其编译成一个web组件。最后，我在index.html中使用它来查看它是否在浏览器中工作。
它在某种程度上起作用，但不是完全起作用。例如，我不确定如何为我的案例翻译app.use(PrimeVue)。
//customElement.ce.vue
<template>
<div>Test</div>
<AutoComplete field="name" />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import AutoComplete from "primevue/autocomplete";
export default defineComponent({
name: "customElement",
props: {
msg: String,
},
components: { AutoComplete },
setup: () => {
console.log(JSON.stringify(theme));
return { PrimeVue };
},
styles: [],
});
</script>
<style scoped lang="scss"></style>//main.ts
import { createApp, defineCustomElement } from "vue";
import App from "./App.vue";
//PrimeVue
import PrimeVue from "primevue/config";
import "/node_modules/primeflex/primeflex.css";
import "primevue/resources/primevue.min.css";
import "primevue/resources/themes/saga-blue/theme.css";
//CustomElement
import customElement from "@/components/customElement.ce.vue";
const customElementWC = defineCustomElement(customElement);
customElements.define("custom-element", customElementWC);
//Setup VueApplication for testing/reference, this works as expected.
const app = createApp(App);
app.use(PrimeVue);
app.mount("#app");//index.html (for testing)
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div> //test app
<custom-element /> //the custom Web Component
<!-- built files will be auto injected -->
</body>
</html>因此我可以看到，PrimeVue-Autocomplete正在显示，但样式不起作用。
所以问题是：
如何在自定义组件中使用所有PrimeVue？
或换句话说:如何使用PrimeVue?设置Vue 3 CustomElement
回答 1
Stack Overflow用户
发布于 2022-02-01 11:15:30
所以我找到了一个解决办法(不是一个合适的解决方案)。使其大部分工作正常的方法是导入组件本身中的样式和js/ts模块。
在web组件的根组件中导入主要样式最有意义。它之所以必须存在，是因为：
- https://github.com/vuejs/vue-cli/issues/6033 and
- https://github.com/vuejs/core/issues/4662
- that网络组件不能使用插件，或者至少我不知道如何使用。换句话说，不存在
app.use()方法.
我仍然不能正确地导入primeflex，所以我不得不使用cdn链接。我认为使用内部导入是可能的，当我发现如何使用内部导入时，我会更新答案。
要使用特定的PrimeVue组件，只需按照文档描述的那样导入和注册它。
<template>
<Button />
</template>
<script lang="ts">
import Button from "primevue/button";
import { defineComponent } from "vue";
export default defineComponent({
components: { Button },
});
</script>
<style>
@import url("https://unpkg.com/primeflex@3.1.0/primeflex.css");
</style>
<style lang="scss" src="@/assets/scss/globals.scss"></style>
<style src="primevue/resources/primevue.min.css"></style>
<style src="primevue/resources/themes/tailwind-light/theme.css"></style>//main.ts
import { defineCustomElement } from "vue";
import App from "./App.ce.vue";
customElements.define("custom-element", defineCustomElement(App));限制:由于缺少插件支持(或者我对插件缺乏了解)，下面的代码如下：
import PrimeVue from 'primevue/config';
app.use(PrimeVue);都不可能。不幸的是，我不能完全理解可能产生的影响。
https://stackoverflow.com/questions/70878556
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号