简体繁体 English

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

[英]Loading custom scripts into Vue.js components

原文 2016-05-09 05:26:26 4 1 javascript/ webpack/ vue.js

I've decided to rewrite a web app using Vue.js but I'd like to start small and use my already working scripts for the main part of the app, while using Vue for other parts. 我已经决定使用Vue.js重写Web应用程序，但我想从小处着手，将已经使用的脚本用于应用程序的主要部分，而将Vue用于其他部分。

I'm looking into the Vue webpack template and I've tried to include multiple script tags into a component but vue gives me a warning that this can't be done. 我正在研究Vue Webpack模板，并且尝试将多个脚本标签包含到组件中，但是vue会警告我无法完成此操作。

I've successfully included the scripts into the main index.html and it's working but I think that's a really bad solution. 我已经成功地将脚本包含在主要的index.html中，并且可以正常工作，但是我认为这是一个非常糟糕的解决方案。 What are some other ways to use Vue components with included js scripts? 还有什么其他方法可以将Vue组件与包含的js脚本一起使用？

1 个解决方案

Vue.js will work with any old scripts you have. Vue.js可以使用您拥有的所有旧脚本。 If you are trying to "start small", just leave your old scripts on the page where they are, and start moving them slowly into components. 如果您试图“从小处着手”，只需将旧脚本保留在页面上，然后慢慢将其移入组件。 https://jsfiddle.net/crabbly/14kvkL6d/ https://jsfiddle.net/crabbly/14kvkL6d/

You could start moving parts of the scripts into the ready method on your components, and start organizing them later into separate methods. 您可以开始将脚本的一部分移到组件上的ready方法中，然后开始将它们组织到单独的方法中。 Eventually it will be very organized and you will be using the full power of Vue. 最终，它将非常有条理，您将使用Vue的全部功能。 https://jsfiddle.net/crabbly/9ux28qL9/ https://jsfiddle.net/crabbly/9ux28qL9/

When using vue-loader and webpack, you will have to use module.export. 使用vue-loader和webpack时，必须使用module.export。 Which shouldn't be hard also. 这也不应该很难。 Start with smaller components. 从较小的组件开始。