处理laravel的前端大型项目

2 回答

• 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/

  回复于 2024-05-19T04:06:12+08:00
• 1

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

  但考虑到你使用的是标准网页技术html，css，jquery和sass，这就是Laravel的基本构建方式 . 因此，对于html使用blade-templates，并将所有jquery和css放在公用文件夹中 . 如果你还没有使用过Laravel之前你应该通过一系列的教程来了解它的MVC结构 .

  回复于 2024-05-19T04:06:12+08:00