Question

我看过一些有关如何将Vue.js包含到Laravel项目中的教程。据我所知，这些教程通过创建模板并将其导入到刀刃文件中来使用Vue.js。仅将Vue javascript文件直接包含到刀片文件中并像这样直接使用Vue是否有任何“错误”？换句话说，只需使用：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

我要使用Vue的刀片文件中。

这样做的原因是我只希望Vue.js替换应用程序中Jquery所做的某些工作。我也一直在考虑使用React。但这似乎与Vue（创建模板，然后应将其导入相应的刀刃文件）的方式相同。

我使用Laravel 5.6。

感谢您的指导！

Answer 1

太好了，我将尽力解释我做这种替换工作的方法。
Laravel带有assets目录，其中包含js和css目录。如果您进一步浏览js目录，则会看到两个文件bootstrap.js和app.js。
bootstrap.js文件不过是方便的东西，例如将jQuery设置为全局对象，以便可以在vue实例中轻松访问它，将axios的默认标头设置为使用时X-CSRF-TOKEN项目中的axios。

但是重要的是app.js。它将初始化vue实例，并将其与#app div绑定，该div主要是<body>标记之后的第一个div。

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

在上面的文件中，您可以看到已创建vue实例并将其绑定到ID为app的div上。除了Vue之外，还注册了一个名为example的组件，该组件以Example.vue的形式存储在js/components/目录下。

现在，根据您的要求，您可以继续执行以下步骤，以创建组件来替换一些jQuery代码，而不会发生任何冲突。

•确保将vue实例绑定到root div，以便您可以通过这种方式使用刀片文件中的组件。

<div id="something">
    <example></example>
</div>

•如果您混合Laravel，请确保编译app.js

mix.js('resources/assets/js/app.js', 'public/js')

我从事的项目需要进行类似的修改，我遵循了刚才提到的方法，并且对我来说做得很好。随时问您任何问题。干杯！

Answer 2

我不确定我是否完全理解您要实现的目标，但是您将必须在每个刀片文件中new Vue，因为当您从一个刀片文件切换到下一个刀片文件时，经典页面将重新加载（如果它们彼此之间不包含在内）。我想这将给您在各种vue实例之间共享数据带来很多麻烦。

将Vue.js包含到Laravel中

2 个答案: