そこで、カスタム 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)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
アプリが DOM をレンダリングする前に、
demo3.jsファイルをインポート (および実行) します。したがって、要素#sceneはまだ存在せず、結果としてnullになります。いくつかの解決策:
-
リーリーmountedフックの後にdemo3.jsファイルを動的にインポートできます:-
リーリー リーリーdemo3.jsコードを関数内にラップしてエクスポートします。-
リーリーdemo3.jsコードを vue コンポーネントに移動し、テンプレート参照を使用します。