Javascript 在创建VueJS实例之前，如何加载外部托管（CDN）JS库*？

我正在尝试将Material Design Lite集成到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是在VueJS应用程序加载之后加载的，因此引用不存在

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

---

或者，当我使用webpack构建代码时：是否有其他方法集成MDL？可能正在将其打包到应用程序中？

这是一个linting错误，而不是实际的代码错误。 linter找不到名为

componentHandler

的方法/变量。并不一定意味着代码不起作用，请尝试使用

window.componentHandler

让linter停止抱怨。您还可以查看linter ignore规则，以忽略该特定行，并查看它是否随后生成

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

正如伯特所说，我还将删除

defer

---

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

不幸的是，删除“延迟”并没有解决问题：（我现在在调用Vue构造函数之前也移动了组件。下面是一个示例（如果您将其添加回去，控制台错误与您的错误匹配）删除延迟修复了错误。我不确定您的构建中有什么不同。我可以看到您的示例手动包含“main.js”脚本标记。我是从默认的webpack模板开始的，它没有包含这样一行。如果您查看我文章中链接的index.html，您可以看到在关闭正文之前没有脚本标记。这可能与此相关吗？通常webpack会注入这一行（请参见索引中的注释..html）或者可以配置为。我只是不认为webpackbin是为此而设置的。哦，我理解。我对评论的解释方式是，我认为主体内容将被webpack取代。请注意，这是我第一次使用webpack，我也绝不是JS专家。我仍在试图对所有这些问题保持清醒的头脑d部件。