分散された .mjs ファイルで使用できる単一の Vue コンポーネントを公開するライブラリを作成するにはどうすればよいですか?
<p>単一の .mjs ファイルにバンドルされた Vue コンポーネントを作成したいと考えています。別の Vue プロジェクトは、HTTP 経由でこの .mjs ファイルを取得し、コンポーネントを使用できます。他のアプリケーションが実行時の構成に基づいてコンポーネントを取得しようとするため、npm 経由でプラグ可能コンポーネントをインストールすることはできません。</p>
<p>プラグイン可能なコンポーネントに関して考慮すべきこと</p>
-
<li>別の UI フレームワーク/ライブラリのサブコンポーネントを使用している可能性があります</li>
<li>カスタム CSS を使用することもできます</li>
<li>画像などの他のファイルに依存する場合があります</li>
</ul>
<p><strong>ライブラリをコピー</strong></p> <p><code>npm create vuetify</code></p> 経由で新しい Vuetify プロジェクトを作成しました。 <p>vite-env.d.ts を除く src フォルダー内のすべてを削除し、コンポーネント Renderer.vue</p> を作成しました。 <pre class="brush:php;toolbar:false;"><スクリプト セットアップ lang="ts"> 「vuetify/components」から { VContainer } をインポートします。 defineProps<{ 値: 不明 }>() </スクリプト> <テンプレート>
<p>コンポーネントの使用</strong></p> <p><code>npm create vue</code></p> を使用して新しい Vue プロジェクトを作成しました。 <p>テストの目的で、生成された .mjs ファイルを新しいプロジェクトの src ディレクトリに直接コピーし、App.vue ファイルを </p> に変更しました。 <pre class="brush:php;toolbar:false;"><スクリプト セットアップ lang="ts"> import { onMounted, type Ref, ref } from "vue"; const ComponentToConsume: Ref = ref(null); onMounted(async () => { 試す { const { Renderer } = await import("./renderer.mjs"); // 実行時にコンポーネントを取得します ComponentToConsume.value = レンダラー; } キャッチ (e) { コンソール.ログ(e); } ついに { console.log("完了..."); } }); </スクリプト> <テンプレート> <div>以下のインポートされたコンポーネント:</div> <div v-if="ComponentToConsume === null"""まだ読み込み中..."</div> <消費するコンポーネント v-else :value="123" /> </template></pre> <p>残念ながら、次の警告とエラーが表示されます</p> <ブロック引用> <p>[Vue warn]: Vue はリアクティブ オブジェクトになったコンポーネントを受け取りました。これは不必要なパフォーマンスのオーバーヘッドを引き起こす可能性があるため、コンポーネントを <code>markRaw</code> でマークするか、<code>ref</code> の代わりに <code>shallowRef</code> を使用することで回避する必要があります。 </p> </blockquote> <ブロック引用> <p>[Vue warn]: インジェクション「Symbol(vuetify:defaults)」が見つかりません。 </p> </blockquote> <ブロック引用> <p>[Vue warn]: セットアップ関数の実行中に処理できないエラーが発生しました</p> </blockquote> <ブロック引用> <p>[Vue warn]: スケジューラー更新の実行中に処理できないエラーが発生しました。 </p> </blockquote> <ブロック引用> <p>キャッチされません (約束どおり) エラー: [Vuetify] デフォルトのインスタンスが見つかりません</p> </blockquote> <p>私に何が足りないのか、あるいはそれを修正する方法を知っている人はいますか? </p>
