了解Laravel Mix

Question

我目前正在将我的一个网站迁移到Laravel,以便在将来使其更易于维护...我有很多使用Laravel构建API的经验,但我在使用Laravel构建网站的经验非常有限,结果我我需要其他专业人士的一点指导.

总之,我非常感谢以下非常简单的问题的答案,如果有人可以饶我几分钟......

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

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

JS:

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');

很简单,我想知道的; 以上是正确的方法吗？是否有更好,更有效的方法来为每个页面自动执行此操作？

从我所看到的,这些文件只是加载依赖项,但这有点令人困惑,因为一些依赖项可能是页面特定的...请问有人可以更详细地解释这些文件的用途是什么？或者至少,他们之间的区别是什么......

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

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

这有什么关系吗？

Answer 1

您将每个样式和脚本捆绑在一个文件中,并将它们提供给缩小的客户端.

对于前端资产,请致电mix.sass('resources/assets/sass/app.scss').在您的样式的入口点,您将能够使用Sass的@import 'about';语法导入其他样式表.(将其他CSS文件重命名为.scss也以此结尾).

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

阅读bootstrap.js文件,了解Laravel默认如何连接jQuery和Vue.您不需要任何此类内容,因此请删除您不想要的内容,或者如果您不需要任何内容,请删除整个文件.

Vue与Laravel开箱即用,但它只是一个建议,你可以用你自己选择的前端框架替换它或将其撕掉并替换它.由你决定.

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