【问题标题】:handle front-end large scale project in laravel在 laravel 中处理前端大型项目
【发布时间】:2018-10-15 16:27:46
【问题描述】:

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


我们的项目目录将如何? sass 目录以及我的文件和图像它们去哪里了?

【问题讨论】:

  • 这主要是基于意见。只要您的编译资产可以从public 目录访问,您就可以在任何您想要的位置找到您的工作文件。
  • 我们指的是这些语言的标准编目

标签: html css laravel sass large-scale


【解决方案1】:

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

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

要使用 laravel mix,你必须先安装 node 和 npm。

然后分别在 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 的内容(存储在resources/js 目录中),将它们混合后拉到public/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/

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

      猜你喜欢
      • 2019-04-25
      • 2015-03-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-01
      • 1970-01-01
      相关资源
      最近更新 更多