Question

如何在Laravel 5.3中包含vue.js和app.js等脚本文件？是否有任何特殊的方式来包含它们？我把它们包括在下面。

<script src="http://127.0.0.1/addbook/node_modules/vue/dist/vue.js"></script>
<script src="js/app.js"></script>

Answer 1

正如其他答案所建议的那样，您应首先阅读Laravel elixir的文档，用它我们可以简单地编写5行配置并立即获得顺畅的前端开发体验，包括webpack用于资产打包，babel用于将ES6代码转换为ES5，browser-sync用于文件监视和多设备同步浏览器自动刷新。

除了灵丹妙药之外，还有我遵循的一些做法：

在app.js中加入通用layouts/app.blade.php，其中包含您绝对确定在每个页面中所需的代码。例如我将$('.datetime').datetimepicker(...)放入其中，因此无论我将bootstrap放在html中，.datetime日期时间选择器插件都会出现在我的选择器中。
对于那些使用npm导入的库，import将它们放在特定视图的js文件中，以便webpack将使用您包含的库编译代码。您可以Vue = require('vue');或import Vue from 'vue';，node.js或任何浏览器都不支持后者，但是babel会为我们翻译。
现在您有了一个特定的视图，例如login.blade.php，@extends app.blade.php布局。另外我们知道最好的做法是将脚本文件放在html＆＃39; body的底部，这样他们就不会阻止dom解析和资源下载。我个人在Laravel blade中使用login.blade.php的语法

@push('childJS')
<script src='/js/login.js'></script>
@endpush

和app.blade.php：

    <script src='/js/app.js'></script>
    @stack('childJS')
</body>

所以2个js文件都显示在body的底部以获得最佳效果，app.js始终显示在login.js之前，以便很好地解析js文件之间的相关性。

Answer 2

您应该使用asset或更好elixir，而不应将node_modules放入公共目录，只需通过Laravel elixir <复制要使用的文件/ p>