1

Vuejs にシンプルなフォームがあります。同じためにVueMaterialを使用しました。さて、次のステップとして、このフォーム/アプリ/マイクロアプリを、Web コンポーネント/共有コンポーネントに呼び出すことができるものにしたいと思います。

以下の私のコード

main.js

import Vue from 'vue';
import App from './App.vue';
import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';
import wrap from '@vue/web-component-wrapper';

Vue.use(VueMaterial);

Vue.config.productionTip = false;
const CustomElm = wrap(Vue, App);

window.customElements.define('custom-elem', CustomElm);

App.vue

<template>


<div id="app">
    <CustomerDetails msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
import CustomerDetails from "./components/CustomerDetails.vue";

export default {
  name: "app",
  components: {
    CustomerDetails
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

まず、私のエンド ターゲットがマイクロ フロント エンドである場合、私のアプローチが正しいかどうかはわかりません。

つまり、(アプローチ #1) スタイル付きコンポーネントを使用し、ベース/UI/ダム コンポーネントを Web コンポーネントにコンパイルする必要があります。次に、これらのコンパイル済みの Web コンポーネントを使用して、今のところ Vue.js で、より大きな Vue.js でForm Component使用するか、(アプローチ #2) Vue.js ですべてを実行し、最後Formに Vue.js で完全なコンポーネントをコンパイルします。 to Web コンポーネントは同じに変換されますか?

2つ目は、上記の 2 つのアプローチが同じであり、影響を及ぼさず、コンポーネントをどのくらい大きくしたいか小さくしたいかに依存する場合です。次に、上記の方法 2 に従って、コンパイルされた Web コンポーネントで VueMaterial を確認できません。

3番目に、最初に単純なコンポーネントを実行してから、任意のフレームワーク（Angular、React、Vuejs）で同じものを使用するためにアプローチ＃1がより理にかなっている場合、Vuejs CLIでコンポーネントをコンパイルすると、distフォルダーが削除され、新しいフォルダーが吐き出されます。したがって、ベース/UI/Dum コンポーネントを Vuejs + Styled コンポーネントまたは Ant Design/マテリアル デザインからこれらのコンポーネントの Web コンポーネント ライブラリへの Web コンポーネントとして使用したい場合、Vuejs でコンパイル部分を管理して、輸入

import {Button, Card, Input} from 'my-web-components';

さて、1 つのアプローチは、各コンポーネントを 1 つずつ手動でビルドし、それらをフォルダー内にコピーしてmy-web-components、同じものとして公開するnpm packageか、内部使用として保持することです。だから、ここでより良いアプローチを探しています！

心に浮かぶもう 1 つの質問は、このアプローチを採用した場合、Vue でフォーム コンポーネントを Web コンポーネントにコンパイルしたときに、VueMaterial をレンダリングできなかったときに、今遭遇したのと同じ問題に遭遇しないかということです。 . 私の混乱は、Vuejs にスタイル付きコンポーネントを使用するかどうか、Web コンポーネントが正確なスタイリングでどのようにコンパイルされるかなどがわからないことです。

これは大まかですが、ここでマイクロフロントエンドアプローチへのすべての最初の考えをうまく絞り込めたことを願っています!

回答をお待ちしております。

4

0 に答える 0