質問: VueCLIを用いて、SPAなポートフォリオサイトを作成しようと勉強しています。 問題 -- 外部JSファイルの読み込み方がわからない 経緯 -- プロジェクトの作成、共通部分のコンポーネント化など、基本的なところは問題なかったのですが、メインページに3Dオブジェクトを配置するために、three.jsを導入しようとしました。 https://threejs.org/ 普通のHTMLであれば、scriptタグで読み込みを行うと思うのですが、VueCLIの場合はどのようにして読み込みを行えばいいかわからず、質問いたしました。 試したこと ----- 自分で調べてみて、index.htmlにscriptタグで読み込みを行う方法が紹介されていたので試してみました。 読み込み自体はできている(開発者ツールのNetworkタブで読み込んでいることを確認)のですが、エラーとして`three is undefined`と表示されてしまいました。 他にもいろいろと試そうとしているのですが、基本的に`Component template should contain exactly one root element`のエラーが出てしまい、うまく行っていません・・・ VueCLIで外部ファイルを読み込むお作法のようなものがわかれば教えていただきたく思います。 よろしくお願いいたします。
回答: このような状況であれば、ブラウザで読み込むより、npm経由でインストールするほうが適当ではないかと思います(three.jsのドキュメントより)。 ``` npm i --save three ``` ``` var THREE = require('three'); ```