项目需求
-
创建新项目BaoAIFront,使用HTML5开发项目
-
创建首页index.html、登录login.html、密码找回findpass.html、注册界面reg.html
-
Gulp创建WEB服务器,运行项目
-
Gulp监控文件修改,BrowserSync实现代码和浏览器显示同步browserSync
-
Git 实现项目版本管理
项目开发工具
下载插件
-
`Chinese (Simplified) Language Pack for Visual Studio Code` :中文语言包
-
`jshint` :js语法检验
-
`git history`:git 日志管理
vscode默认已经支持HTML5、CSS和JS 语法检查, 调试 (包含远程调试), 智能感知,
代码格式化, 代码重构, 单元测试, 代码片段等。
创建项目
-
新建目录:/baoai/BaoAIFront
-
使用Visual Studio Code打开项目目录
-
新建文件 index.html
- 录入html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello World
</body>
</html>
- 创建测试WEB服务器及代码监控
如果未安装node.js 和 gulp, 如下操作
-
安装Node.js
-
npm install –g gulp
-
新建package.json
- 新建gulpfile.js
安装和运行
-
安装 npm install
-
运行 gulp serve
浏览器同步测试
浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。
Git版本管理:项目初始化
- Git 初始化
- 选择目录
- 需要更新到版本库的文件
- 全部提交修改文件
- 当前项目版本标签:baoai_html5_v1
命名本次【项目初始化】提交后版本标签名:baoai_html5_v1
本章项目源码
URL:https://gitee.com/yuanbaonet/master_web/tree/baoai_html5_v1/
对应版本:baoai_html5_v1