Layui框架学习day1

最新推荐文章于 2024-07-24 18:20:33 发布

xiaoX熊猫

最新推荐文章于 2024-07-24 18:20:33 发布

阅读量463

点赞数 7

文章标签： layui 学习前端

本文链接：https://blog.csdn.net/2301_81641896/article/details/140248974

版权

1. 准备工作

安装Node.js和npm：

Layui本身是一个前端UI框架，但使用npm（Node.js的包管理器）可以方便地安装和管理Layui及其依赖。因此，首先需要安装Node.js，它会自动附带npm。
访问Node.js官网下载并安装适合你操作系统的Node.js版本。

在项目文件夹内，执行npm init -y命令来初始化一个新的Node.js项目。这个命令会生成一个package.json文件，它包含了项目的元数据和依赖信息。

你可以通过npm来安装Layui。在项目目录下执行npm install layui --save命令，将Layui添加到你的项目依赖中。
注意：由于Layui主要是一个前端UI框架，其资源文件（CSS、JS等）通常是通过CDN或直接从下载的包中引入的，而不是通过npm包的形式来引入JavaScript模块。但使用npm安装可以方便地管理Layui的版本和依赖。

在你的HTML文件中，通过<link>标签引入Layui的CSS文件，通过<script>标签引入Layui的JS文件。
如果你通过npm安装了Layui，你可以在node_modules/layui/dist/目录下找到这些文件，并相对地引入它们。但更常见的是使用CDN链接，因为这样可以减少项目的大小并提高加载速度。

例如，使用CDN引入Layui的CSS和JS：

html复制代码

	`<!DOCTYPE html>`
	`<html>`
	`<head>`
	`<meta charset="utf-8">`
	`<title>Layui Demo</title>`
	`<!-- 引入 layui.css -->`
	`<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css" media="all">`
	`</head>`
	`<body>`

	`<!-- 你的HTML代码 -->`

	`<!-- 引入 layui.js -->`
	`<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>`
	`<script>`
	`// 使用 Layui 模块`
	`layui.use(['layer', 'form'], function(){`
	`var layer = layui.layer`
	`,form = layui.form;`

	`// 示例：使用 layer 模块弹出提示`
	`layer.msg('Hello Layui!');`
	`});`
	`</script>`

	`</body>`
	`</html>`