处理拉拉维尔的前端大型项目



我们的团队,与Laravel合作,我们想开始一个大规模的项目。 前端项目将使用 Html Css Bootstrap jquery Sass 编写 我们的任务运行者是Gulp


我们的项目目录将如何? sass目录和我的文件和图像他们去哪里?

您可以使用Laravel Mix编译CSS和JavaScript预处理器。因此,您将所有资产存储到资源/资产文件夹中。

Laravel Mix 提供了一个流畅的 API,用于使用几个常见的 CSS 和 JavaScript 预处理器为您的应用程序定义 webpack 构建步骤。

要使用 laravel混合,您必须首先安装nodenpm.

然后分别在 resources/app/sass目录和 resources/sass 中创建文件 app.js 和 app.scss。 然后打开 webpack.mix.js 文件,该文件将位于您的项目根目录上,在 webpack.mix 中编写以下代码.js文件

在 webpack.mix 中.js 文件(您可以在项目根目录中看到此文件(

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

现在让我们看看上面两行是什么意思?

mix.js('resources/assets/js/app.js', 'public/js')说要读取app.js内容(存储在资源/js 目录中(,将它们拉出并在混合后将它们放在公共/js 中。

mix.sass也是如此.由于它使用 SAAS 兼容,因此您可以使用基于 CSS 或 SAAS 的语法来定义布局。无论如何,Webpack将它们编译为一个CSS。现在在 master.blade.php 中,您只需分别对 JS 和 CSS 资源进行这两个调用:

<script src="{!! asset('js/app.js') !!}"></script>

<link rel="stylesheet" href="{!! asset('css/app.css') !!}">

现在运行npm run dev命令。 它将编译您的CSS和JS文件,并将构建放在公共文件夹中。

有关详细说明,您可以查看

https://laravel.com/docs/5.7/mix

https://appdividend.com/2018/02/19/laravel-mix-compiling-assets-tutorial/

它因项目和框架而异。把东西放在你觉得最有意义的地方。如果您正在运行使用 Laravel 作为后端 API 的独立前端应用程序,您可能会使用自己的树很好地组织您的应用程序。

但考虑到你使用的是html,css,jquery和sass,这是标准的Web技术,这就是Laravel的基本目的。因此,对 html 使用刀片模板,并将所有 jquery 和 css 放在公共文件夹中。如果你以前没有使用过Laravel,你可能应该浏览一系列教程来了解它的MVC结构。

最新更新