如何将库导入vue组件？

Posted 2023-02-22

【中文标题】如何将库导入vue组件？

【英文标题】：How to import library into vue component?

【发布时间】：2018-08-26 04:31:23

【问题描述】：

假设有组件ComponentA，我正在其中导入libA。

import libA from 'libA'

和libA 需要libB 加载。 它适用于如果我在 html 中加载它们：

<script url='libB url'/>
<script url='libA url'/>

但我想将其导入ComponentA。 我是 ES6、webpack、babel、vue 和组件的新手。 任何帮助将不胜感激！

【参考方案1】：

您无法从外部 URL 导入文件。 Using external javascript files in a .js file 您可以下载外部脚本并将它们导入或要求它们到您的 vue 组件中，或者将它们作为脚本标记放置在您的 html 文件中。

我假设你的意思是 <script src='libB url' /> 而不是 <script url='libB url' />

——编辑——

您也可以在build/webpack.prod.conf.js 和build/webpack.dev.conf.js 中使用webpack plugins。例如，如果您的 libB 是 jQuery，例如您可以在 plugins 数组下添加以下内容

new webpack.ProvidePlugin(
  $: 'jquery',
  jquery: 'jquery',
  'window.jQuery': 'jquery',
  jQuery: 'jquery',
),

【讨论】：

感谢您的回答。实际上这些库也在我的 package.json 和 node_modules 中。是的，对src :) 对不起，我的错

你也可以在你的 'webpack.prod.conf.js' 和 'webpack.dev.conf.js' 中使用库作为全局变量的新 webpack 插件。 new webpack.ProvidePlugin( $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery', jQuery: 'jquery', Ladda: 'ladda', ladda: 'ladda', PNotify: 'PNotify' ),

非常感谢。我使用你的方法成功导入了threejs，但有panolens库github.com/pchen66/panolens.js/blob/master/build/panolens.js不可导出:(我该如何处理？