在 Vue.js 应用程序中包含 npm 包答案

【问题标题】：Including npm packages in Vue.js app在 Vue.js 应用程序中包含 npm 包
【发布时间】：2019-01-26 02:13:11
【问题描述】：

我有一个结构如下的 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 框架的新手。提前谢谢你。

【问题讨论】：

只导入它而不是使用
如何导入？我已经习惯了 github 说明中提供的导入行，抱歉问

标签： javascript html node.js npm vue.js

【解决方案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 将可用：

<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

【讨论】：