layui--入门(helloWorld)
具体可参考官方文档:https://www.layui.com/doc/
由于引入layui 需要用到node.js
安装过程可参考:
https://www.cnblogs.com/liuchenxing/p/8036384.html
layui--入门(helloWorld)
1.首先官网首页下载 layui https://www.layui.com/
解压到指定目录(记住目录)
win+r 输入cmd 进入dos窗口 切换到解压目录
输入
npm install layui-src
如图:
回车。
执行成功。
解压目录下生成node_modules文件和package-lock.json文件。
获得layui之后,我们就进入使用。
点击进入node_modules目录,将layui-src当做项目导入静态服务器(我这里是用的HBuilder工具)
新建helloWorld.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="src/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="src/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
最后展示:
输入
layui--入门(helloWorld)的更多相关文章
- RabbitMQ学习总结 第二篇:快速入门HelloWorld
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- Wix学习整理(1)——快速入门HelloWorld
原文:Wix学习整理(1)--快速入门HelloWorld 1 Wix简介 Wix是Windows Installer XML的简称,其通过类XML文件格式来指定了用于创建Windows Instal ...
- CodeIgniter入门——HelloWorld
原文:CodeIgniter入门--HelloWorld CodeIgniter(CI)是一套给PHP网站开发者使用的应用程序开发框架和工具包. 初次接触,来一个HelloWorld~~~ ^_^ 准 ...
- Flask入门HelloWorld
Flask入门HelloWorld Flask官网:http://flask.pocoo.org/ Flask中文翻译:http://dormousehole.readthedocs.io/en/la ...
- Windows Eclipse Scala的入门HelloWorld
[学习笔记] Windows Eclipse Scala的入门HelloWorld 有关带scala版本的eclipse4.7的下载, 你可以直接去: http://scala-ide.org/dow ...
- Springboot2.x入门——helloWorld
Springboot2.x入门--helloWorld 一.简介 1.1 Springboot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的 ...
- idea创建Scala入门HelloWorld
Scala开发环境的搭建 首先到Scala官网下载Scala网址为 https://www.scala-lang.org/download/ 找到下图所示位置:选择相对应的版本的Scala进行下载,这 ...
- Node.js开发入门—HelloWorld再分析
在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...
- 8086汇编语言入门-HelloWorld
附件下载: http://pan.baidu.com/s/1i5R9qO9 密码:rfgk 80x86微处理器汇编语言编程.学习任何编程语言都免不了要跨越HelloWorld这道坎,面向机器的 ...
- RabbitMQ 入门 Helloworld
1.介绍 RabbitMQ 是信息传输的中间者.本质上,他从生产者(producers)接收消息,转发这些消息给消费者(consumers).换句话说,他能够按根据你指定的规则进行消息转发.缓冲.和持 ...
随机推荐
- WPS 2010 页眉下方添加下划线
我们在使用Word2010编辑文档中时,有时需要在页眉下方删除或添加一条横线.本篇经验就来介绍一下删除和添加横线的方法. 工具/原料 Word 2010 一.删除横线 1 打开Word2010 ...
- RHEL/CentOS 7 中配置 PXE 网络启动服务器
RHEL/CentOS 7 中配置 PXE 网络启动服务器 作者: Matei Cezar 译者: LCTT joeren | 2015-02-17 14:28 评论: 13 收藏: 8 分享: ...
- shell应用之cobbler批量部署
如果使用的是原始源,可直接使用该脚本,如果是用的其它源且有cobbler安装包的可删除脚本中的配置yum源步骤.批量部署使用的软件有:cobbler dhcp httpd tftp-server xi ...
- PHP相关session的知识
由于http协议是一种无状态协议,所以没有办法在多个页面间保持一些信息.例如,用户的登录状态,不可能让用户每浏览一个页面登录一次.session就是为了解决一些需要在多页面间持久保持一种状态的机制.P ...
- Git指令大全
仓库 # 在当前目录新建一个Git代码库 $ git init # 下载一个项目和它的整个代码历史 $ git clone [url] 配置 # 显示当前的Git配置 $ git config --l ...
- 使用vue-i18n实现中英文切换(内含动态属性的绑定)
最近做学生管理系统,因为有国外的学生,所以要进行中英文切换,查了查Vue中使用vue-i18n插件能够实现网页的中英文切换,学习内容如下: 一.下载vue-i18n插件 npm install vue ...
- OpenResty搭建高性能服务端
OpenResty搭建高性能服务端 Socket编程 Linux Socket编程领域为了处理大量连接请求场景,需要使用非阻塞I/O和复用,select.poll.epoll是Linux API提 ...
- 数据、人工智能和传感器按COVID-19新冠流感排列
数据.人工智能和传感器按COVID-19新冠流感排列 Data, AI and sensors arrayed against COVID-19 各国政府.卫生保健专业人士和工业界争先恐后地应对Cov ...
- 读HikariCP源码学Java(二)—— 因地制宜的改装版ArrayList:FastList
前言 如前文所述,HikariCP为了提高性能不遗余力,其中一个比较特别的优化是它没有直接使用ArrayList,而是自己实现了FastList,因地制宜,让数组的读写性能都有了一定程度的提高. 构造 ...
- 【Java】Debug断点调试常用技巧
Debug操作技巧 Show Execution Point 将光标回到当前断点停顿的地方 Step Over 执行当前行代码,并将运行进度跳转到下一行. Step Into 进入到当前代码行的方法内 ...