H5前端开发框架
##目录
##功能
- 使用ejs模版引擎模块化开发
- 可视化开发,快速浏览项目以及网页
- 支持浏览器与手机访问时的同步,浏览器页面切换的同时,手机浏览器将会同步切换(需手机浏览器对websocket的支持)
- 快速切换屏幕尺寸,可测试浏览器尺寸兼容性。
- 项目依赖gulp进行快速开发并同时对less进行编译
##下载及安装
- 切换到任意目录执行
git clone [email protected]:TVVT/Zero.git
- 同级目录执行
git clone [email protected]:TVVT/Projects.git
cd Zero && npm install
cd Projects && npm install
##使用
- 启动Zero(Zero将会占用您的3000端口用于web服务以及8000端口用于websocket,如果有端口冲突,可以在跟目录的settings.json中修改) cd Zero && node app.js
##项目目录 目前Zero对项目目录要求很高,需要严格按照要求的目录来建立项目,当然,我们提供了方便的方法用于快速建立项目以及页面和模块。
项目目录结构如下:
-Zero
-Projects
-YourProject
-pages
-demo.ejs
-demo.config.json
-demo.data.json
-components
-demoModule.ejs
-demoModule.json
-resource
-css
-demo.css
-images
-less
-components
-demoModule.less
-pages
-demo.less
-scripts
-demo.js
-layouts
##目录解析:
- 项目由pages组成,即demo.ejs
- 页面可以include模块,即demoModule.ejs
- 每个模块拥有对应的默认数据--demoModule.json以及对应的less--demoModule.less
- 页面引用模块的同时,模块less将会和页面less一同编译成css文件--demo.css
- 当页面中有数据要覆盖模块默认数据的时候,使用如下:
include(demoModule,pageData)
此时,pageData将会代替默认数据成为demoModule模块的数据
##项目初始化以及快速创建
- 进入Projects目录并打开less监听
gulp watchless
- 创建一个新的项目--YourProject
gulp new --name YourProject
- 创建一个新的页面--demo
gulp newp --name YourProject:demo
注:如果需要项目中自动加入requirejs的代码并且异步加载页面js--demo.js,那么只需要在命令后面跟上:js,即gulp newp --name YourProject:demo:js
- 创建一个新的模块--demoModule
gulp newc --name YourProject:demoModule
##TODO
- 增加对ArtTemplate的支持
- 降低Zero对Projects目录的要求,继续不断的updating
- 近期提交一个全新的demo引导新的用户
##授权协议 Released under the MIT, BSD, and GPL Licenses