そこで、カスタム HTML テンプレートを vuejs プロジェクトに変換しました。 ホームページで使用するすべての css ファイルと js ファイルをインポートしました。 CSS ファイルは正常に読み込まれます。 JS ファイルの場(chǎng)合、テーマにはいくつかのカスタム JS スクリプトと、Three.js などの一般的に使用されるライブラリが付屬しています。 これらすべてを script タグの HomeComponent の下にインポートしました。 しかし、次のエラーが発生しました:
リーリー以下は私の App.vue コードです:
リーリー以下は私の homecomponent.vue コードです (一部のコードはテンプレート內(nèi)に隠されています):
リーリー問題は、demo3.js ファイルにあります。
デモ3.js
リーリーつまり、アプリはまったく読み込まれません。今、この問題を解決する方法がわかりません。 HTMLテンプレートをvuejsに変換するのは初めてです。何が起こるかわかりません。 ファイル構(gòu)造のスクリーンショット (https://i.stack.imgur.com/dKzTb.png)
console.log のエラー詳細(xì)のスクリーンショット (https://i.stack.imgur.com/9Rzap.png)
1
0
0
アプリが DOM をレンダリングする前に、demo3.js ファイルをインポート (および実行) します。したがって、要素 #scene はまだ存在せず、結(jié)果として null になります。
いくつかの解決策:
mounted フックの後に demo3.js ファイルを動(dòng)的にインポートできます: demo3.js コードを関數(shù)內(nèi)にラップしてエクスポートします。 demo3.js コードを vue コンポーネントに移動(dòng)し、テンプレート參照を使用します。 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
