在 Laravel 中使用 AdminLTE

新建 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 文件

这个时候去访问视图会发现找不到依赖到 cssjs 文件,引入这些静态文件有很多方法,这里使用 Laravel Mix 进行 Webpack 编译打包。

新建用于构建的源文件,当然你愿意的话,可以随意命名与放置,下面构建的时候只要对应上路径就可以了。

把原来页面中引用的 cssjs 文件全都拿过来:

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

完工了

打开浏览器试试效果吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Laravel框架一:原理机制篇 Laravel作为在国内国外都颇为流行的PHP框架,风格优雅,其拥有自己的一些特...
    Mr_Z_Heng阅读 3,804评论 0 13
  • 懵逼,竟然没有中文版。自己对英文不敏感,看一遍记录下来,备用。 介绍 这个模板是针对大型应用,默认你已经熟悉Web...
    奇董阅读 873评论 0 2
  • Jenkins-安装与配置 Jenkins下载地址:https://jenkins.io/index.html 下...
    靖小侠阅读 568评论 0 0
  • 有的人说,不到南墙不回头。有的人说,就算到了南墙,我也要把墙拆了传过去。而我到了南墙就望而却步,在南墙外边徘徊……...
    顶心杉阅读 227评论 0 0
  • 11.07-11.09,参加了江阴市创业大学三天的创业培训课程。说实话,原本是抱着碰运气的心态去听的,毕竟现在孵化...
    薛三水阅读 954评论 7 5