如何将 Vuetify 与 Angular +7 或 +9 一起使用？

Question

我需要将 UI 组件 Vuetify 与 Angular 一起使用，我将 VueCustomElement 与 Angular 一起使用并成功工作，但我尝试添加 Vuetify 但我遇到了一些错误，例如缺少 $attr、$ ...等。

我需要添加 Vuesax、Quaser 或 Vuetify，因为我喜欢它。 我知道所有类型的材料，如 Angular 材料或 PrimeNg，但需要更多定制，而且我没有空闲时间工作。

app.module.ts:

@NgModule({
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})

app.component.html：

<my-vue-web-comp></my-vue-web-comp>

app.js

import Vue from 'vue/dist/vue';
import vueCustomElement from 'vue-custom-element';
import Vuetify from 'vuetify';
import {VApp} from 'vuetify/lib';

Vue.use(Vuetify)
Vue.component('v-app', VApp)
Vue.use(vueCustomElement);
 const MyVueWebComp = {
    template:`
      <v-app></v-app>
    `
  };
  Vue.customElement('my-vue-web-comp', MyVueWebComp);

Answer 1

恐怕你只能硬着头皮，要么改用 Vue.js，要么使用专为 Angular 设计的框架。 Vuetify（和其他）中有很多为 Vue 编写的依赖项，需要重写才能在 Angular 中工作。没有简单的解决办法。

如果你真的没有时间，你可以得到一个类似于this 或this 的 UI 工具包。它们通常至少会收取固定费用，但它们具有类似于 Vuetify 的预先设置样式的 UI 元素。

编辑：你也可以使用像 Bootstrap 这样的东西，它预先设置了元素。也许这可能是一个中间立场。