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. poj 3675 Telescope (圆与多边形面积交)

    3675 -- Telescope 再来一题.这题的代码还是继续完全不看模板重写的. 题意不解释了,反正就是一个单纯的圆与多边形的交面积. 这题的精度有点搞笑.我用比较高的精度来统计面积,居然wa了. ...

  2. Ubuntu 开机自动挂载磁盘

    Ubuntu 磁盘挂载 1.使用命令查看分区 sudo fdisk -l 1 可以根据上图提供的磁盘信息确定想挂载的磁盘,以及确定挂载的位置. 我此次的目的是将/dev/sda2 磁盘挂载到/mnt/ ...

  3. em&rem

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem px像素(Pi ...

  4. rdlc报表部署

    1)在D盘创建目录ReportViewer 2)打开运行界面,运行如下的执行 copy C:\Windows\assembly\gac_msil\Microsoft.ReportViewer.Comm ...

  5. Educational Codeforces Round 10 A B题、

    A. Gabriel and Caterpillar 题意: 就是说  一个小孩子去观察毛毛虫从 h1的地方爬到h2的地方.毛毛虫从10点爬到22点.每小时爬的距离是a, 晚上22点到第二天早上10点 ...

  6. 七个用于数据科学(data science)的命令行工具

    七个用于数据科学(data science)的命令行工具 数据科学是OSEMN(和 awesome 相同发音),它包括获取(Obtaining).整理(Scrubbing).探索(Exploring) ...

  7. [转]Jmeter压力测试工具安装及使用教程

    一.Jmeter下载 进入官网:http://jmeter.apache.org/ 1.第一步进入官网如下图 2.选择进行下载,下载下来为一个压缩包,解压即可. 3.我下载的是jmeter4.0版本, ...

  8. H3C 配置NAPT

  9. Python--day39--管道和数据共享(面试可能会问到)

    1,管道 上面所述挂起即为阻塞 管道.py from multiprocessing import Pipe, Process def func(conn1,conn2): conn2.close() ...

  10. vue-learning:32 - component - 异步组件和工厂函数

    异步组件 只有在这个组件需要使用的时候才从服务器加载这一个组件模块,用于渲染,并且会把结果缓存起来供未来复用. 实现方法: 组件定义的时候,以一个工厂函数的形式传入,在需要组件的执行这个函数,然后将组 ...