在 Laravel 项目中使用 AdminLTE 前端模板
HomeArchivesAboutLinks
在 Laravel 项目中使用 AdminLTE 前端模板
在 Laravel 项目中使用 AdminLTE 前端模板

在 Laravel 项目中使用 AdminLTE 前端模板

Published date
Jul 30, 2019
Tags
Laravel
AdminLTE
Webpack

新建 Laravel 项目

我这边使用的是目前最新的 5.8 版本
composer create-project --prefer-dist laravel/laravel <project-name>

安装 Laravel 项目依赖

yarn install

安装 AdminLTE 项目依赖

因为目前的 AdminLTE 依赖于 Bootstrap 3.x 而非最新的 4.x，因此在这里的演示需要安装一个 bootstrap-sass 包：
yarn add admin-lte
yarn add bootstrap-sass

设置视图（Views）

将 /node_modules/admin-lte/starter.html 拷贝到 Laravel 项目的 /resources/views/ 目录下，重命名为 starter.blade.php（当然你也可以改成其它名字），并绑定到路由视图中，这样就可以访问到这个 demo 页面了。

配置 CSS 和 JavaScript 文件

这个时候去访问视图会发现找不到依赖到 css 和 js 文件，引入这些静态文件有很多方法，这里使用 Laravel Mix 进行 Webpack 编译打包。
新建用于构建的源文件，当然你愿意的话，可以随意命名与放置，下面构建的时候只要对应上路径就可以了。
把原来页面中引用的 css 和 js 文件全都拿过来：
// /resources/sass/admin.scss

// 由于目前 AdminLTE 使用的是 Bootstrap 3.x，因此引入这个包
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import '~font-awesome/css/font-awesome.min.css';
@import '~Ionicons/dist/css/ionicons.min.css';
@import '~admin-lte/dist/css/AdminLTE.min.css';

// 主题可以换成 _all-skins.min.css 方便挑选自己喜欢的主题
@import '~admin-lte/dist/css/skins/skin-blue.min.css';
// /resources/js/admin.js

// Laravel 默认生成的 Bootstrap 文件里包含了 jQuery，所以为了偷懒我们可以直接引入这个文件
require('./bootstrap');
require('admin-lte');
在 Laravel Mix Webpack 构建配置 /Webpack.mix.js 中加入：
mix
  .js('resources/js/admin.js', 'public/js')
  .sass('resources/sass/admin.scss', 'public/css')
  .version();

// 为了方便演示，再把默认的头像文件复制过去
mix.copy(
  'node_modules/admin-lte/dist/img/user2-160x160.jpg',
  'public/dist/img/user2-160x160.jpg'
);
这样以后就可以进行构建了：
yarn run dev
最后再修改一下我们的视图文件，替换为我们打包好的静态文件（其中 ... 表示省略代码）：
<!DOCTYPE html>

<html>
  <head>
    . . .
    <link rel="stylesheet" href="{{ mix('css/admin.css') }}" />
  </head>

  <body class="hold-transition skin-blue sidebar-mini">
    . . .
    <script src="{{ mix('js/admin.js') }}"></script>
  </body>
</html>

完工了

打开浏览器试试效果吧。
Copyright 2022 imbytecat