[英]Including npm packages in Vue.js app
I have a vue app that is structured like so (auto created by vue init webpack myProject
:我有一个结构如下的 vue 应用程序(由
vue init webpack myProject
自动创建:
index.html
components/
-main.js
-App.vue
I want to be able to include npm packages.我希望能够包含 npm 包。 For example, https://github.com/ACollectionOfAtoms/atomic-bohr-model .
例如, https://github.com/ACollectionOfAtoms/atomic-bohr-model 。 Following the instructions, I ran
npm install atomic-bohr-model --save
and included按照说明,我运行
npm install atomic-bohr-model --save
并包含
<script type="text/javascript" src="./node_modules/atomic-bohr-model/dist/atomicBohrModel.min.js" charset="utf-8"></script>
in my index.html file.在我的 index.html 文件中。 To use the package, according to the github page, I need to run some javascript,
要使用该包,根据github页面,我需要运行一些javascript,
var atomicConfig = {
containerId: "#bohr-model-container",
numElectrons: 88,
idNumber: 1
}
var myAtom = new Atom(atomicConfig)
that runs with a corresponding element: <div id="bohr-model-container"></div>
.与相应的元素一起运行:
<div id="bohr-model-container"></div>
。 So I did the following inside one component that renders into App.vue:因此,我在渲染到 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>
The problem is, when I try to run the app, I get a blank white page.问题是,当我尝试运行该应用程序时,我得到一个空白页。 The line,
var myAtom = new Atom(atomicConfig);
行,
var myAtom = new Atom(atomicConfig);
, breaks the application. , 破坏应用程序。 Why does this happen?
为什么会这样? My guess is that Atom isn't defined in my component's script.
我的猜测是我的组件脚本中没有定义 Atom。 Do I import something in the first line?
我要在第一行导入一些东西吗?
Why doesn't this work just like the sample application given for the npm package, that runs just using plain html and js files?为什么这不像为 npm 包提供的示例应用程序那样工作,它只使用纯 html 和 js 文件运行? Forgive my inexperience, I'm new to javascript frameworks.
原谅我的经验不足,我是 javascript 框架的新手。 Thank you in advance.
先感谢您。
Generally, to import npm modules in a Webpack project, npm-install
the package, and then import
or require
the module in your code.通常,要在 Webpack 项目中导入 npm 模块,
npm-install
包,然后在代码中import
或require
模块。 For example:例如:
import _ from 'lodash';
// OR
const _ = require('lodash');
In your case, atomic-bohr-model
only declares window.Atom
and does not export any symbols, so you'd need to import it like this:在您的情况下,
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
And then your component would use window.Atom
within the mounted
lifecycle hook , at which point the template would be rendered and #bohr-model-container
would be available:然后你的组件将在
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.