web-dev-qa-db-ja.com

Vue.jsアプリにnpmパッケージを含める

私はそのように構成されたvueアプリを持っています（_vue init webpack myProject_によって自動作成されました：

_index.html
components/
-main.js
-App.vue
_

Npmパッケージを含めたいのですが。たとえば、 https://github.com/ACollectionOfAtoms/atomic-bohr-model 。指示に従って、私は_npm install atomic-bohr-model --save_を実行し、

_<script type="text/javascript" src="./node_modules/atomic-bohr-model/dist/atomicBohrModel.min.js" charset="utf-8"></script>_

私のindex.htmlファイルにあります。パッケージを使用するには、githubページによると、JavaScriptを実行する必要があります。

_var atomicConfig = {
  containerId: "#bohr-model-container",
  numElectrons: 88,
  idNumber: 1
}

var myAtom = new Atom(atomicConfig)
_

対応する要素で実行されます：_<div id="bohr-model-container"></div>_。そこで、App.vueにレンダリングする1つのコンポーネント内で次のことを行いました。

_<template>
    <div id="bohr-model-container" style="width: 200px; height: 200px"></div>
</template>

<script>
var atomicConfig = {
    containerId: '#bohr-model-container',
    numElectrons: 88,
    idNumber: 1,
};

var myAtom = new Atom(atomicConfig);

export default {
    name: 'myComponent'
};
</script>
_

問題は、アプリを実行しようとすると、空白の白いページが表示されることです。行var myAtom = new Atom(atomicConfig);は、アプリケーションを中断します。なぜこれが起こるのですか？私の推測では、Atomはコンポーネントのスクリプトで定義されていません。最初の行に何かをインポートしますか？

プレーンなhtmlファイルとjsファイルを使用して実行されるnpmパッケージ用のサンプルアプリケーションと同じように機能しないのはなぜですか？私の経験不足を許してください、私はjavascriptフレームワークに不慣れです。前もって感謝します。

javascripthtmlnode.jsnpmvue.js
5
agreis1

一般に、Webpackプロジェクトにnpmモジュールをインポートするには、 npm-install パッケージ、次に import または require コード内のモジュール。例えば：

import _ from 'lodash';
// OR
const _ = require('lodash');

デモ

あなたの場合、atomic-bohr-modelはwindow.Atomを宣言するだけで、シンボルをエクスポートしないので、次のようにインポートする必要があります。

import 'atomic-bohr-model/dist/atomicBohrModel.min.js'; // sets window.Atom
// OR
require('atomic-bohr-model/dist/atomicBohrModel.min.js'); // sets window.Atom

そして、コンポーネントはwindow.Atomを mounted ライフサイクルフック内で使用し、その時点でテンプレートがレンダリングされ、#bohr-model-containerが使用可能になります。

<template>
  <div id="bohr-model-container" style="width: 200px; height: 200px"></div>
</template>

<script>
import 'atomic-bohr-model/dist/atomicBohrModel.min.js';

export default {
  mounted() {
    new window.Atom({
      containerId: '#bohr-model-container',
      numElectrons: 88,
      // ...
    });
  }
};
</script>

デモ

4
tony19