将自定义脚本加载到 Vue.js 组件中答案

【问题标题】：Loading custom scripts into Vue.js components将自定义脚本加载到 Vue.js 组件中
【发布时间】：2016-05-09 05:26:26
【问题描述】：

我决定使用 Vue.js 重写一个 Web 应用程序，但我想从小处着手，将我已经工作的脚本用于应用程序的主要部分，同时将 Vue 用于其他部分。

我正在研究 Vue webpack 模板，并尝试将多个脚本标签包含到一个组件中，但 vue 给了我一个警告，告诉我这无法完成。

我已经成功地将脚本包含到主 index.html 中并且它正在工作，但我认为这是一个非常糟糕的解决方案。还有哪些其他方法可以使用包含 js 脚本的 Vue 组件？

【问题讨论】：

为什么需要多个脚本标签？只是为了导入其他脚本依赖？
好吧，它可以只是依赖项的一个标签，但 vue-loader 只允许 1 个脚本标签，我想知道如何将我的脚本导入其中？使用require 我的脚本需要导出函数，这是最好的选择吗？
是的，因为你使用基于模块的加载器作为 webpack，所以更好的选择是 module.export 你的旧脚本
如果这是唯一可行的选择，请将您的评论作为答案发表，以便我接受 :)

【解决方案1】：

Vue.js 可以与您拥有的任何旧脚本一起使用。如果您尝试“从小处着手”，只需将旧脚本留在它们所在的页面上，然后开始慢慢将它们移动到组件中。 https://jsfiddle.net/crabbly/14kvkL6d/

您可以开始将部分脚本移动到组件上的ready 方法中，然后开始将它们组织成单独的方法。最终它将非常有条理，您将使用 Vue 的全部功能。 https://jsfiddle.net/crabbly/9ux28qL9/

当使用 vue-loader 和 webpack 时，你必须使用 module.export。这也不应该很难。从较小的组件开始。

【讨论】：