理解Laravel混合

理解Laravel混合

目前我正在将我的一个网站迁移到Laravel,以便将来可以更容易维护…我有很多与Laravel一起构buildAPI的经验,但是我使用Laravel构build网站的经验非常有限,因此我我需要从另一个职业的一点点的指导。

简而言之,如果有人能够让我几分钟的话,我将非常感谢以下非常简单的问题的答案。

基于文件的JS和CSS而不是基于应用程序

我喜欢用特定的方式写我的JS和CSS文件,每个页面都有自己特定的页面相关的文件。 例如, about.php可能具有以下依赖关系:

JS:

  • jquery.js
  • any_other_third_party_library.js
  • app.js (全局函数)
  • about.js (页面特定function)

CSS:

  • some_third_party_library.css
  • app.css (全局样式)
  • about.css (页面特定样式)

在我自己的框架中,将上面的内容合并为一个JS文件和一个CSS文件。 据我所知,Laravel Mix就是这样做的…

不过,据我所知,这样做的方法如下:

webpack.mix.js:

 // About mix.scripts([ 'resources/assets/js/app.js', 'resources/assets/js/about/about.js' ], 'public/js/about/about.js'); 

很简单,我想知道什么; 上述正确的方法去呢? 有没有更好,更有效的方法来自动化每页?

什么是bootstrap.js和app.js文件?

从我可以看到,这些文件只是加载依赖关系,但是这有点令人困惑,因为一些依赖关系可能是页面特定的…请有人可以进一步详细解释这些文件是什么? 或者至less,他们之间有什么不同?

摆脱Vue

我没有兴趣在我的项目中使用Vue ,所以我删除了以下文件:

/components/Example.vue app.js中的vue代码

这有什么关系吗?

       

网上收集的解决方案 "理解Laravel混合"

你将所有的样式和脚本绑定到一个文件中,并将它们提供给客户端。

对于前端资产,请调用mix.sass('resources/assets/sass/app.scss') 。 在你的样式的入口点,你可以根据需要使用Sass的@ @import 'about';导入你的其他样式表@import 'about'; 句法。 (重命名您的其他CSS文件也以.scss结尾)。

对于您的后端资产,请调用mix.js('resources/assets/js/app.js') 。 然后,类似地,您可以使用import './about.js';导入其他JavaScript模块import './about.js'; 。 您可能需要查看ES2015模块,以便学习如何编写模块化JavaScript。

仔细阅读bootstrap.js文件,了解Laravel默认如何连接jQuery和Vue。 你不需要任何这个,所以删除你不想要的任何东西,或者如果你不需要删除整个文件。

Vue与Laravel一起出来,但这只是一个build议,你可以用你自己的前端框架来替代它,或者把它replace掉,换成什么都不要。 由你决定。

编辑:长话短说; 使用mix.sassmix.js ,阅读使用Sass和ES2015模块编写真棒代码。