我有一个结构如下的 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 框架的新手。提前谢谢你。
最佳答案
通常,要在 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
生命周期 Hook ,此时模板将被渲染并且 #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>
关于javascript - 在 Vue.js 应用程序中包含 npm 包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51922428/