FastAdmin,PHP,Fastadmin引入layui模,fastadmin使用layui。

FastAdmin基于RequireJS进行前端JS模块的管理,因此如果我们需要再引入第三方JS插件,则必按照RequireJS的规则进行载入。如果你还不了解什么是RequireJS,可以先简单了解下RequireJS,相关链接:http://www.ruanyifeng.com/blog/2012/11/require_js.html

FasrAdmin 前台文件在 require-frontend.js 或 frontend-init.js 后台文件在 require-backend.js 或 backend-init.js 对应的文件,定义插件的名称和依赖。

其中 require-frontend.js 和 require-backend.js 是官方自己的写好的依赖和插件。而打开 frontend-init.js 和 backend-init.js 我们可以发现是空白的。那正好用于我们自己编写,方便管理。

接下来我们就在 backend-init.js中添加如下代码:

define(['backend'], function (Backend) {
require.config({
paths: {
'layui': '../libs/layerui/layui/layui',
},
shim: {
'layui':{
deps:['css!../libs/layerui/layui/css/layui.css'],
exports: "layui"
},
}
});
});

  

首尾两行是backend-init.js中自带的,重点是require.config这部分。

pahts 内就是我们引入的js 模块名和路径。RequireJS 就是记载 js 文件的,所以定义到文件名即可 加载的文件 即是  ../libs/layerui/layui/layui.js

shim 是依赖配置,layui 它的依赖为一个CSS文件。如果插件没有依赖,则可以不写此部分。

exports这个为输出的变量名,表示在模块外部调用时返回的值,比如

require(['layui'], function(layui){
//这里的layui的值就是layui这个变量的值
});

在对应的js 文件中调用 layui 模块

define(['layui'], function (undefined) {
var Controller = {
index: function () {
//正常使用 layui 模块 即可
layui.use('laydate', function(){
var laydate = layui.laydate; }
}
}

 就可以在对应的 js 文件中愉快的使用 layui 了

  特别注意的是,如果我们修改了require-backend.jsbackend-init.js文件,在部署到生产环境前需要使用php think min -m all -r all压缩打包一下JS和CSS文件

Fastadmin 如何引入 layui 模块的更多相关文章

  1. layui模块规范

    刚入公司不久,就开始做项目了,最后还是选择用layui来做前端的页面,一来是可以自适应,二来是用框架比较方便,简洁. 先看下Layui的介绍: layui 是一款采用自身模块规范编写的情怀级前端UI框 ...

  2. webpack对于引入的模块无法智能代码提示

    前端模块太多了,模块里的方法比较难记住,所以我们一般靠的都是IDE的代码提示. 但是有时候我们会发现对于引入的模块没有代码提示,我也安装了模块呀,为什么没有代码提示? 主要是package.json的 ...

  3. 在单文件组件中,引入安装模块里的css的2种方式:script中引入、style中引入

    在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...

  4. Android 引入外部模块编译选择

    /********************************************************************************* * Android 引入外部模块编 ...

  5. electron主进程引入自定义模块

    对于electron以及nodejs开发,是一只小菜鸟,第一次想做个应用 只能边学边做,遇到各种各样的问题. 1.不想把所有的主进程函数放到一个文件中,这样文件比较乱,并且不好处理 想法:将另一个js ...

  6. 怎么在vue中引入layui

    新项目想用layui框架,学习了把前辈是怎么引入layui的,这里记录下 1.index.html要引入layui.js文件 <script src="/static/layui/la ...

  7. 一、基础项目构建,引入web模块,完成一个简单的RESTful API

    一.Spring Boot的主要优点: 为所有Spring开发者更快的入门 开箱即用,提供各种默认配置来简化项目配置 内嵌式容器简化Web项目 没有冗余代码生成和XML配置的要求 二.使用maven构 ...

  8. SpringBoot2.x入门教程:引入jdbc模块与JdbcTemplate简单使用

    这是公众号<Throwable文摘>发布的第23篇原创文章,收录于专辑<SpringBoot2.x入门>. 前提 这篇文章是<SpringBoot2.x入门>专辑的 ...

  9. js 模块化 -- 基本的导出与引入class模块

    1.目录结构 2.类语法与导出 class food { } //定义常量 let c = "苹果"; //正确的函数写法 food.prototype.getfood = fun ...

随机推荐

  1. 2018-8-10-win10-uwp-读取保存WriteableBitmap-、BitmapImage

    title author date CreateTime categories win10 uwp 读取保存WriteableBitmap .BitmapImage lindexi 2018-08-1 ...

  2. css模仿ipad的日历

    https://www.cnblogs.com/sandraryan/ 题外话之:最近的练习用js之类的写起来会简单点,但是为了巩固基础,只好html和css硬怼页面X﹏X 这是一个日历的代码 注释有 ...

  3. echarts 图表自适应外部盒子大小

    项目中用到了echarts,由于页面是自适应的,还得兼容移动, 因此图表还需要根据盒子的大小来变化. 自适应窗口及盒子大小 页面中有一个[放大.缩小]功能,及全屏展示和预览图表 窗口自适应 let m ...

  4. springSecurity安全框架的学习和原理解读

    最近在公司的项目中使用了spring security框架,所以有机会来学习一下,公司的项目是使用springboot搭建 springBoot版本1.59 spring security 版本4.2 ...

  5. “浪潮杯”第九届山东省ACM大学生程序设计竞赛(重现赛)E.sequence(树状数组求逆序对(划掉))

    传送门 E.sequence •题意 定义序列 p 中的 "good",只要 i 之前存在 pj < pi,那么,pi就是 "good": 求删除一个数, ...

  6. element-ui tree 根据不同叶子节点设置是否显示复选框

    公司业务要求不同根节点配置显示与否复选框,官方文档没有这样的配置,所以想到了修改element-ui源码. 1.这里将“node_modules\element-ui\packages”下的tree文 ...

  7. P1013 高精度加法

    题目描述 给你两个很大的正整数A和B,你需要计算他们的和. 输入格式 输入一行包含两个正整数A和B,以一个空格分隔(A和B的位数都不超过 \(10^5\)) 输出格式 输出一行包含一个整数,表示A+B ...

  8. POJ 1797 Heavy Transportation(Dijkstra运用)

    Description Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can no ...

  9. Linux 内核热插拔事件产生

    一个热插拔事件是一个从内核到用户空间的通知, 在系统配置中有事情已经改变. 无论何 时一个 kobject 被创建或销毁就产生它们. 这样事件被产生, 例如, 当一个数字摄像头 使用一个 USB 线缆 ...

  10. es6笔记 day2---数组热闹的循环

    数组: ES5里面新增一些东西 循环 : 1.for for(let i =0;i<arr.length;i++) 2.while arr.forEach() arr.map() arr.fil ...