そこで、カスタム HTML テンプレートを vuejs プロジェクトに変換しました。 ホームページで使用するすべての css ファイルと js ファイルをインポートしました。 CSS ファイルは正常に読み込まれます。 JS ファイルの場合、テーマにはいくつかのカスタム JS スクリプトと、Three.js などの一般的に使用されるライブラリが付属しています。 これらすべてを script タグの HomeComponent の下にインポートしました。 しかし、次のエラーが発生しました:
リーリー以下は私の App.vue コードです:
リーリー以下は私の homecomponent.vue コードです (一部のコードはテンプレート内に隠されています):
リーリー問題は、demo3.js ファイルにあります。
デモ3.js
リーリーつまり、アプリはまったく読み込まれません。今、この問題を解決する方法がわかりません。 HTMLテンプレートをvuejsに変換するのは初めてです。何が起こるかわかりません。 ファイル構造のスクリーンショット (https://i.stack.imgur.com/dKzTb.png)
console.log のエラー詳細のスクリーンショット (https://i.stack.imgur.com/9Rzap.png)
P粉9204852852023-12-14 09:31:33
アプリが DOM をレンダリングする前に、demo3.js ファイルをインポート (および実行) します。したがって、要素 #scene はまだ存在せず、結果として null になります。
いくつかの解決策:
mounted フックの後に demo3.js ファイルを動的にインポートできます: demo3.js コードを関数内にラップしてエクスポートします。 demo3.js コードを vue コンポーネントに移動し、テンプレート参照を使用します。