如何在创建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，因此代码可见。 它包含：

• 提交介绍MDL和错误
• 包含指向CDN的链接的“index.html”文件
• 调用componentHandler的VueJS“入口点”

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

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

或者，因为我正在使用webpack来构建代码：是否有另一种方法来集成MDL？ 也许将它打包到应用程序中？

Answer 1

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

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

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

如果您不熟悉linters，它所做的只是查看您的js代码并检查您是否使用未定义的变量（如本例中），或使用错误的缩进等.vue模板将linter放入构建过程中因此，在修复了linter要求您修复的所有内容之前，您将无法获得正确的构建。 您可以完全禁用linting，但我建议不要使用它，因为它可以提高整体代码质量，如果你保持它的imo。