Laravel5.8 以 Webpack 方式引入 AdminLTE

1、安装 webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

全局安装:

npm install -g webpack

本地目录安装:

npm install --save-dev webpack

2、初始化 node

进入项目根目录,执行:

npm install  //安装常用模块
npm install admin-lte --save  //安装 admin-lte
npm install bootstrap-sass  //安装 bootstrap

根据需要,安装其他包,如:

npm install jasny-bootstrap
npm install bootstrap-switch

3、将 admin-lte/starter.html 拷贝至/resources/views/中作为布局文件 starter.blade.php

修改 starter.blade.php中的css ,js内容,注释原依赖

3、编辑 /resources/js/admin.js和/resources/css/admin.scss

把starter page原先所需的依赖资源放入分别放入Laravel mix的待编译文件admin.scss和admin.js中。

原始 js, css 文件在 node_modules 文件夹中。

新建 admin.scss:

@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";
@import "~admin-lte/dist/css/skins/_all-skins.css";
@import "~admin-lte/plugins/iCheck/all.css";

新建admin.js:

require('./bootstrap')
require('admin-lte')

4、编辑webpack.mix.js:

// admin 模块
mix.js('resources/js/admin.js', 'public/js')
    .sass('resources/sass/admin.scss', 'public/css')
    .version();

5、准备工作完成,开始生成:

npm run dev

最后效果:


Comments are closed.