在 Vue.js 應用程序中包含 npm 包

Question

我有一個結構如下的 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 的一個組件中執行了以下操作：

<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。 我要在第一行導入一些東西嗎？

為什么這不像為 npm 包提供的示例應用程序那樣工作，它只使用純 html 和 js 文件運行？ 原諒我的經驗不足，我是 javascript 框架的新手。 先感謝您。

Answer 1

通常，要在 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

然后你的組件將在mounted的生命周期鈎子中使用window.Atom ，此時模板將被渲染並且#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>

演示