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。我要在第一行中导入内容吗？

为什么不能像仅使用纯html和js文件运行的npm软件包所提供的示例应用程序那样工作？原谅我的经验不足，我是javascript框架的新手。预先谢谢你。

Answer 1

通常，要在Webpack项目中导入npm模块，请先npm-install包，然后再在代码中import或require导入模块。例如：

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

demo

在您的情况下，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将可用：< / p>

<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>

demo

在Vue.js应用程序中包含npm软件包

1 个答案: