VueCLIでの外部JSをファイルの読み込みについて

Question

VueCLIを用いて、SPAなポートフォリオサイトを作成しようと勉強しています。

##問題
外部JSファイルの読み込み方がわからない

##経緯
プロジェクトの作成、共通部分のコンポーネント化など、基本的なところは問題なかったのですが、メインページに３Dオブジェクトを配置するために、three.jsを導入しようとしました。
https://threejs.org/

普通のHTMLであれば、scriptタグで読み込みを行うと思うのですが、VueCLIの場合はどのようにして読み込みを行えばいいかわからず、質問いたしました。

##試したこと
自分で調べてみて、index.htmlにscriptタグで読み込みを行う方法が紹介されていたので試してみました。
読み込み自体はできている（開発者ツールのNetworkタブで読み込んでいることを確認）のですが、エラーとしてthree is undefinedと表示されてしまいました。

他にもいろいろと試そうとしているのですが、基本的にComponent template should contain exactly one root elementのエラーが出てしまい、うまく行っていません・・・

VueCLIで外部ファイルを読み込むお作法のようなものがわかれば教えていただきたく思います。
よろしくお願いいたします。

Answer 1

このような状況であれば、ブラウザで読み込むより、npm経由でインストールするほうが適当ではないかと思います（three.jsのドキュメントより）。

npm i --save three

var THREE = require('three');

Comments

[Spade]

ご回答ありがとうございます！！
無事に動作させることができました。

そもそもnpmやwebpackへの理解が足りていないように感じました・・・
精進いたします・・・！