登录页面,基本要素如下:
1.页面展示
2.基本脚本判断
3.后端交互
为了逼格,我们开始创建文件夹层级.
在项目根目录下创建
src
--main.js
--tpl
--login.html(后缀随意)
注意:一旦发布到生成环境,以上文件是不需要上传到服务器上的
1.利用我们之前学习的gulp-webpack把JS编译
2.利用gulp把tpl下面的文件生成到build/html里面
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>用户登录</h2>
<div>用户名</div>
<div><input type="text" id="txtUserName"></div>
<div>密码</div>
<div><input type="password" id="txtUserPwd"></div>
<div>
<button id="btnLogin">登录</button>
</div>
<!--本节课引用js先写死在这 -->
<script src="../js/build.js"></script>
</body>
</html>
main.js
var btnLogin=document.getElementById("btnLogin");
btnLogin.onclick=function () {
alert("登录测试");
}
webpack.config.js
module.exports=
{
entry:[ //entry是入口文件 可以多个
__dirname+'/src/main.js'
],
output:{
path:__dirname+'/build/js',
filename:'build.js'
}
}
gulpfile.js
//生成JS文件
gp.task('build-js',function () {
gp_webpack(webpack_config, webpack)
.pipe(gp.dest('./build/js'));
});
//最终生成
gp.task('run',['build-js'],function () {
gp.src(['./src/tpl/*.html'])
.pipe(gp.dest('./build/html'));
})
运行
gulp run