用最新layui 搭建个后台模板
时间: 2024-05-11 10:19:42 浏览: 132
基于layui的后台管理系统模板
以下是使用最新版layui搭建后台模板的步骤:
1. 准备工作
首先,你需要在电脑上安装好编辑器,比如VS Code、Sublime等。还需要安装Node.js和npm。
2. 初始化项目
在命令行中进入你想要创建项目的目录,执行以下命令:
```
npm init -y
```
它会在当前目录下创建一个package.json文件,其中包含了你的项目信息。接下来,执行以下命令安装layui:
```
npm install layui
```
3. 创建html页面
在你的项目目录下创建一个index.html文件,并在文件中添加以下代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理系统</title>
<link rel="stylesheet" href="./node_modules/layui-src/dist/css/layui.css">
</head>
<body>
<script src="./node_modules/layui-src/dist/layui.js"></script>
</body>
</html>
```
以上代码引入了layui的CSS和JS文件。
4. 创建JS文件
在项目目录下创建一个main.js文件,并在文件中添加以下代码:
```
layui.use(['element', 'layer'], function(){
var element = layui.element;
var layer = layui.layer;
layer.msg('Hello World');
});
```
以上代码使用了layui的element和layer模块,其中element模块用于创建菜单,layer模块用于弹出层。layer.msg()是layer模块中的一个方法,用于创建一个信息框弹窗。
5. 运行项目
在命令行中执行以下命令启动项目:
```
node main.js
```
在浏览器中打开index.html文件,你应该能看到一个简单的后台模板。
至此,你已经成功使用最新版layui搭建了一个后台模板。
阅读全文