代码之家 › 专栏 › 技术社区 › Araw

包括Vue.js到Laravel

laravel-5 laravel

Araw · 技术社区 · 6 年前

我看过一些关于如何将Vue.js包含到Laravel项目中的教程。据我所见,教程使用的是Vue.js,方法是创建模板并将它们导入到blade文件中。直接将Vue javascript文件包含到blade文件中并像那样直接使用Vue有什么“错误”吗?换句话说,就是使用:

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

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

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

我用拉弗5.6。

谢谢你的指导!

2 回复 | 直到 6 年前

imrealashu 6 年前

很好,我会尽量解释我做这种替换工作的方法。
拉维和 assets 目录包含 js 和 css 目录。如果你探索更多 js公司 目录你会看到两个文件 bootstrap.js 和 app.js .
引导程序.js 文件只不过是一些方便的东西,如设置 jQuery 作为全局对象,以便可以在vue实例中轻松访问它,设置 axios 默认页眉 X-CSRF-TOKEN 在项目中使用AXIOS。

但重要的是 应用程序js . 它初始化vue实例并用 #app 主要是第一个div后面的div <body> 标签。

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 . 同时 Vue 正在注册一个名为 example 储存在 js/components/ 目录为 Example.vue .

现在,根据您的需求,您可以继续并按照以下步骤创建组件来替换一些jQuery代码,而不产生任何冲突。

–确保将vue实例绑定到根div,以便可以这样使用刀片文件中的组件。

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

如果你拉威尔混合,确保你编译 应用程序js

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

我在一些项目上也做过类似的修改,我遵循了刚才提到的方式,对我来说工作得很好。你有什么问题都可以问。干杯!

ohfierce 6 年前

我不完全确定我完全理解你想达到的目标,但你必须 new Vue 从一个刀片文件切换到下一个刀片文件(如果它们不包含在彼此中)时,将重新加载经典页面。我想这会给您在各种vue实例之间共享数据带来很多麻烦。