将 Vue.js 包含到 Laravel 中
Posted
技术标签:
【中文标题】将 Vue.js 包含到 Laravel 中【英文标题】：Including Vue.js into Laravel 【发布时间】：2018-08-09 08:48:11 【问题描述】：我看过一些关于如何将 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。
感谢您的指导！
【问题讨论】：
为什么不使用Laravel 5 Mix。默认情况下已经包含了 vue.js。 【参考方案1】：太好了，我将尝试解释我进行此类替换工作的方法。
Laravel 带有 assets 目录，其中包含 js 和 css 目录。如果您探索更多js 目录，您会看到两个文件bootstrap.js 和app.js。bootstrap.js 文件不过是一些方便的东西，例如将jQuery 设置为全局对象以便可以访问它在 vue 实例中很容易，在项目中使用 axios 时将axios 默认标头设置为X-CSRF-TOKEN。
但重要的部分是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 的组件，该组件存储在js/components/ 目录下为Example.vue。
现在，根据您的要求，您可以继续按照以下步骤创建组件来替换一些 jQuery 代码，而不会产生任何冲突。
• 确保将 vue 实例绑定到根 div，以便您可以通过这种方式使用刀片文件中的组件。
<div id="something">
<example></example>
</div>
• 如果您使用 Laravel，请确保编译 app.js
mix.js('resources/assets/js/app.js', 'public/js')
我从事的项目有类似的必要修改，我遵循了我刚才提到的方式，对我来说工作得很好。 随时问你有什么问题。干杯！
【讨论】：
【参考方案2】：我不完全确定我完全理解您想要实现的目标，但是您必须在每个刀片文件中使用 new Vue，因为当您从一个刀片文件切换到下一个刀片文件时，您会重新加载经典页面（如果他们'不包含在彼此中）。我想这会给您在各种 vue 实例之间共享数据带来很多麻烦。
【讨论】：
以上是关于将 Vue.js 包含到 Laravel 中的主要内容，如果未能解决你的问题，请参考以下文章
是否可以将 Vue Admin (Bulma) 包含到 Laravel 中？
你如何将 Vue.js 包（如 vodal）集成到 Laravel 中？
将 Vue.js 安装到 Laravel 后无法加载示例组件
无法在 Laravel/Vue.Js 中执行 Ajax 请求