Skip to content

Latest commit

 

History

History
63 lines (52 loc) · 3.59 KB

README.md

File metadata and controls

63 lines (52 loc) · 3.59 KB
Raw

h5Express脚手架 Power By AngularJs

作者: 顾航(rexhang)

时间: 2015.06.20

==代码部分仅供参考==

1.项目简述

  • 搭建Nond.js环境，安装下载关于gulp下相关插件包到本地目录。

  • 构建前端页面目录结构，规划前端架构。

  • 拆分前端静态页面，划分出视图层，控制层以及数据层。

  • 编写关于应用app的入口文件，构建路由，分发任务到各控制器、数据层。

  • 分别编写控制器、以及数据模型的数据交互，设计API接口与后台数据的调用。

  • 编写DOM操作相关的用户交互效果。

  • 编写Gulp自动化前端架构，处理前端的优化（web服务器，ES6编译，代码和图片的压缩，代码合并，代码混淆，语法检测，浏览器自动更新，单元测试，整体测试等）功能性代码。

  • 使用webpack整合代码合并文件。

2.环境搭建 基于Node.js下的web运行环境

3.目录划分

目录结构

  • rex_cms(项目名称) --------------------------- 项目开发目录
    • node_modules --------------------------------- Node模块
    • src ------------------------------------------ 应用代码目录
      • api ------------------------------------------ api接口目录
      • assets --------------------------------------- web图标资源
      • bower ---------------------------------------- bower下载的文件目录
      • css ------------------------------------------ css样式文件目录
      • h5Static ------------------------------------- 单个h5页面目录
      • img ------------------------------------------ 图片文件目录
      • js ------------------------------------------- js文件
      • lib ------------------------------------------ js插件
      • ng-js ---------------------------------------- angularjs资源
      • scss ----------------------------------------- scss样式文件目录
      • template ------------------------------------- 路由模板
      • webpack_build -------------------------------- webpack构建的文件目录
      • app.js --------------------------------------- 路由配置文件
      • directive.app.js ----------------------------- 自定义指令
      • factory.app.js ------------------------------- 工厂服务
      • index.html ----------------------------------- 应用入口文件
    • .bowerrc ------------------------------------- Bower目录配置文件
    • bower.json ----------------------------------- Bower下载的文件配置
    • entry.js ------------------------------------- Webpack入口文件配置模板
    • gulpfile.js ---------------------------------- Gulp配置文件
    • package.json --------------------------------- Node插件配置文件
    • README.md ------------------------------------ 开发说明
    • runlocal.bat --------------------------------- windows运行脚本
    • runwatch.bat --------------------------------- windows运行脚本
    • webpack.config.js ---------------------------- Webpack配置文件

4.代码编写顺序

  1. 通过cnpm install 安装相关包(注意：之前请先npm install -g cnpm –registry=https://registry.npm.taobao.org | npm install --global gulp | npm install webpack -g)

  2. 编写路由配置文件，以分发到各个控制器、数据模型中处理事务。

  3. 编写相关的控制器，抽离出service、directive服务。

  4. 编写相关指令文件，控制DOM操作元素。

  5. 编写其它相关文件。

  6. 编写gulp测试文件gulpfile.js、编写webpack测试文件webpack.config.js用于对项目的架构，应用于正式环境的部署文面。

  7. 编写单元测试文件与用户真实测试环境文件。