javascript - 如何在创建 VueJS 实例之前*加载外部托管 (CDN) JS 库？

Question

我正在尝试将 Material Design Lite 集成到 VueJS 应用程序中。我找到了以下博客文章:

https://posva.net/js/2015/08/26/using-material-design-lite-with-vuejs

不幸的是，当我将它添加到我从 vuejs cli 工具创建的“main.js”文件中时，我收到以下错误:

ERROR in ./src/main.js

  ✘  http://eslint.org/docs/rules/no-undef  'componentHandler' is not defined  
  /data/src/main.js:474:5
      componentHandler.upgradeElement(this.el)

我将一个分支推送到 github，以便代码可见。它包含:

• The commit introducting MDL and the error
• The "index.html" file containing the links to the CDN
• The VueJS "entry-point" which calls componentHandler

我相当确定 MDL 在 VueJS 应用程序加载后 加载，因此引用不存在。

如何确保 VueJS 仅在依赖项可用后才加载？

或者，当我使用 webpack 构建代码时:还有其他方法来集成 MDL 吗？也许将其打包到应用程序中？

Answer 1

这是一个 linting 错误，而不是实际的代码错误。 linter 找不到名为 componentHandler 的方法/变量。并不一定意味着代码不起作用，请尝试使用 window.componentHandler 让 linter 停止提示。您还可以查看 linter 忽略规则以忽略该特定行，然后查看它是否会构建。

linter 在 webpack vue 模板的构建过程中运行，因此构建将失败，因为它找不到您在 vue 代码库中使用的引用。 linter 不知道您在 html 文件中从外部加载的脚本。

正如 Bert 所说，我还会删除 defer

如果你不熟悉 linters，它所做的就是查看你的 js 代码并检查你是否使用了 undefined variable (就像在这种情况下)，或者使用了错误的缩进等。vue 模板将 linter 放入构建过程，因此在修复 linter 要求您修复的所有内容之前，您将无法获得正确的构建。您可以完全禁用 linting，但我建议不要这样做，因为如果您将它放在 imo 附近，它会提高整体代码质量。