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>

最后展示:

输入

原文地址:https://www.cnblogs.com/zjc2018/p/10134444.html

时间: 2024-10-11 05:13:52

layui--入门(helloWorld)的相关文章

Hibernate4.3.5入门HelloWorld

本文给出一个简单的Hibernate4.3.5入门实例,配置方式采用XML文件方式(这种方式已经不是主流了,目前越来越多采用Annotation方式映射POJO实体) 代码结构如下图所示:主要用到hibernate-release-4.3.5.Final\lib\required下的jar 在这里只展示出主要的代码 1.HibernateUtil.java 1 package com.wangp.hibernate.helper; 2 3 import org.hibernate.Session

CodeIgniter入门——HelloWorld

原文:CodeIgniter入门--HelloWorld CodeIgniter(CI)是一套给PHP网站开发者使用的应用程序开发框架和工具包. 初次接触,来一个HelloWorld~~~ ^_^ 准备工作: 一.下载CI 官方网站:http://ellislab.com/codeigniter CodeIgniter中国:http://codeigniter.org.cn/ 可以从上面下载相关版本以及文档,我在这里下载使用的2.2.0版本. 二.安装CI 1.首先你得有php运行环境.如果是w

Springboot2.x入门——helloWorld

Springboot2.x入门--helloWorld 一.简介 1.1 Springboot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 1.2 Springboot2.x比较1.x 新版本代码无

Node.js开发入门—HelloWorld再分析

在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld网站,这次我们再来仔细分析下代码,了解更多的细节. 先看看http版本的HelloWorld代码: 代码就是这么简单: // 引入http模块 var http = require("http"); // 创建server,指定处理客户端请求的函数 http.createServer( function(request, response) { response.writeHead(200, {&quo

8086汇编语言入门-HelloWorld

附件下载:  http://pan.baidu.com/s/1i5R9qO9    密码:rfgk 80x86微处理器汇编语言编程.学习任何编程语言都免不了要跨越HelloWorld这道坎,面向机器的汇编语言与面向过程/对象的高级语言不同,编码过程中对寄存器.内存的分配等细节都需要编程人员去关心:而高级语言程序如C语言.C++,即使你不知道printf具体是怎么实现的,只要掌握使用方法即可(封装成模块).C语言的helloworld程序简单到只有一行执行语句:   printf("Hello,W

C语言编程入门——HelloWorld!

 将我的C语言学习过程记录下来,供大家学习交流,适合C语言入门者学习,希望能对大家有帮助. 推荐学习教程:<C语言程序设计> 作者:谭浩强 推荐学习视频:C语言教程 作者:郝斌(链接) 我在学完之后,记下了自己的学习心得,大家可在我的博客中查看(链接) Hello World ,中文意思:你好,世界.世界上的第一个程序就是Hello World,由Brian Kernighan创作. 大多数程序员去学一门语言,写的第一个程序都是HelloWorld! C语言版 Hello World #

Mac环境 go语言之入门HelloWorld

1. 安装mercurial Mercurial 是一种轻量级分布式版本控制系统,采用 Python 语言实现 可以输入hg命令查询系统是否安装mercurial,可以如下两种命令安装 $sudo pip install mercurial 安装成功之后 $sudo easy-install mercurial 安装之后,输入hg命令,如下内容显示,表示成功安装 mercuria $ hg Mercurial Distributed SCM basic commands: add        

RabbitMQ 入门 Helloworld -摘自网络

本系列教程主要来自于官网入门教程的翻译,然后自己进行了部分的修改与实验,内容仅供参考. “Hello world” of RabbitMQ 1.Windows下RabbitMQ的安装 下载Erlang,地址:http://www.erlang.org/download/otp_win32_R15B.exe ,双击安装即可(首先装) 下载RabbitMQ,地址:http://www.rabbitmq.com/releases/rabbitmq-server/v3.3.4/rabbitmq-serv

SpringMvc入门 -----HelloWorld

1. 导入需要的架包: 2. 配置web.xml,添加Servlet <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation&l

【转】RabbitMQ 入门 Helloworld

1.Windows下RabbitMQ的安装 下载Erlang,地址:http://www.erlang.org/download/otp_win32_R15B.exe ,双击安装即可(首先装) 下载RabbitMQ,地址:http://www.rabbitmq.com/releases/rabbitmq-server/v3.3.4/rabbitmq-server-3.3.4.exe ,双击安装即可 下载rabbit-client.jar ,Java代码时需要导入.地址:http://www.ra