HTML5 - 2.项目需求及开发

项目需求

1. 创建新项目BaoAIFront，使用HTML5开发项目

2. 创建首页index.html、登录login.html、密码找回findpass.html、注册界面reg.html

3. Gulp创建WEB服务器，运行项目

4. Gulp监控文件修改，BrowserSync实现代码和浏览器显示同步browserSync

5. Git 实现项目版本管理

项目开发工具

Visual Studio Code

下载插件

• `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