理解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代码
这有什么关系吗?
你将所有的样式和脚本绑定到一个文件中,并将它们提供给客户端。
对于前端资产,请调用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.sass
和mix.js
,阅读使用Sass和ES2015模块编写真棒代码。