Fastadmin 如何引入 layui 模块
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.js或backend-init.js文件,在部署到生产环境前需要使用php think min -m all -r all压缩打包一下JS和CSS文件
Fastadmin 如何引入 layui 模块的更多相关文章
- layui模块规范
刚入公司不久,就开始做项目了,最后还是选择用layui来做前端的页面,一来是可以自适应,二来是用框架比较方便,简洁. 先看下Layui的介绍: layui 是一款采用自身模块规范编写的情怀级前端UI框 ...
- webpack对于引入的模块无法智能代码提示
前端模块太多了,模块里的方法比较难记住,所以我们一般靠的都是IDE的代码提示. 但是有时候我们会发现对于引入的模块没有代码提示,我也安装了模块呀,为什么没有代码提示? 主要是package.json的 ...
- 在单文件组件中,引入安装模块里的css的2种方式:script中引入、style中引入
在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...
- Android 引入外部模块编译选择
/********************************************************************************* * Android 引入外部模块编 ...
- electron主进程引入自定义模块
对于electron以及nodejs开发,是一只小菜鸟,第一次想做个应用 只能边学边做,遇到各种各样的问题. 1.不想把所有的主进程函数放到一个文件中,这样文件比较乱,并且不好处理 想法:将另一个js ...
- 怎么在vue中引入layui
新项目想用layui框架,学习了把前辈是怎么引入layui的,这里记录下 1.index.html要引入layui.js文件 <script src="/static/layui/la ...
- 一、基础项目构建,引入web模块,完成一个简单的RESTful API
一.Spring Boot的主要优点: 为所有Spring开发者更快的入门 开箱即用,提供各种默认配置来简化项目配置 内嵌式容器简化Web项目 没有冗余代码生成和XML配置的要求 二.使用maven构 ...
- SpringBoot2.x入门教程:引入jdbc模块与JdbcTemplate简单使用
这是公众号<Throwable文摘>发布的第23篇原创文章,收录于专辑<SpringBoot2.x入门>. 前提 这篇文章是<SpringBoot2.x入门>专辑的 ...
- js 模块化 -- 基本的导出与引入class模块
1.目录结构 2.类语法与导出 class food { } //定义常量 let c = "苹果"; //正确的函数写法 food.prototype.getfood = fun ...
随机推荐
- 写给初学前端工程师的一封信 - 转载 至https://www.w3ctech.com/topic/983
以下内容是转载https://www.w3ctech.com/topic/983 大家好: 应波波的邀请写一写我对这个话题的想法.从去年开始不少朋友让我帮忙介绍前端工程师,绝大部分忙都没帮上,原因是真 ...
- 使用git和sourcetree提交代码的一些问题
今天遇到的几个坑算是解决了1.开始不能用指令提交,可以执行git add命令前添加gitdir=$(git rev-parse --git-dir); scp -p -P 29418 wangtao1 ...
- oracle 优化GROUP BY
提高GROUP BY 语句的效率, 可以通过将不需要的记录在GROUP BY 之前过滤掉.下面两个查询返回相同结果但第二个明显就快了许多. 低效: SELECT JOB , AVG(SAL) FROM ...
- oracle用UNION替换OR (适用于索引列)
通常情况下, 用UNION替换WHERE子句中的OR将会起到较好的效果. 对索引列使用OR将造成全表扫描. 注意, 以上规则只针对多个索引列有效. 如果有column没有被索引, 查询效率可能会因为你 ...
- Fragment开发实战(一)
一. Fragment的特征: 1. Fragment总是Activity界面的组成部分.Fragment可调用getActivity()方法获取它所在的Activity,Activity可调用Fra ...
- 洛谷P3178 [HAOI2015]树上操作 题解 树链剖分+线段树
题目链接:https://www.luogu.org/problem/P3178 这道题目是一道树链剖分的模板题. 但是在解决这道问题的同事刷新了我的两个认识: 第一个认识是:树链剖分不光可以处理链, ...
- 洛谷P3377 【模板】左偏树(可并堆) 题解
作者:zifeiy 标签:左偏树 这篇随笔需要你在之前掌握 堆 和 二叉树 的相关知识点. 堆支持在 \(O(\log n)\) 的时间内进行插入元素.查询最值和删除最值的操作.在这里,如果最值是最小 ...
- java什么是方法(Method)?
方法是一组为了实现特定功能的代码块的集合.方法在语法上的功能主要有以下两个: ①:结构化代码 将代码按照功能进行组织,使代码的结构比较清晰,容易阅读和修改,也就是程序的可维护性强. ②:减少代码重复 ...
- svn 删除、移动和改名
删除.移动和改名 Subversion allows renaming and moving of files and folders. So there are menu entries for d ...
- 【React】富文本编辑器 清空文本内容 获取HTML
富文本编辑器 React 传入 import React,{Component } from 'react'; import { Card, Button, Table, Form, Select ...