虎虾式后台前端库,希望能成长起来,成为其它后台的前端基础
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
img
js
offline
page
sass
template
test
.gitignore
Gruntfile.js
LICENSE
README.md
VERSION
bower.json
build.json
config.rb
gulpfile.js
index.dev.html
manifest.appcache.sample
package.json

README.md

Tiger Prawn

“虎虾”企业级后台前端框架,旨在提供简单快捷的企业级应用开发环境。后面简称tp。

虎虾是东南亚常见的食材,体型较大,价格适中,视觉冲击力不如龙虾那么大,但是味道更好,口感也更好。如此取名便是寄寓这个框架,可能不如Angular、React那么响亮,但更好用,更强大。

安装

tp现在仍处于比较初级的阶段,安装和使用比较依赖人工。

建议使用bower进行安装。

bower install tiger-prawn --save

安装后,使用linkscript引用资源。tp中使用了大量外部库和框架,引用这些资源的时候,可以使用公共CDN也可以使用bower_components。

目录结构

tp 的目录结构大体如下。通常来说,基于tp开发只需要引用dist/目录里的内容即可。

tiger-prawn
├-- dist/
|   ├-- js
|   |   ├-- tiger-prawn.js
|   |   └-- tiger-prawn.min.js
|   └-- css
|       └-- screen.min.js
├-- sass/
├-- js/
|   ├-- config.js
|   └-- index.js
├-- page/ // 用来存放各种与业务逻辑相关的小页面
|   ├-- sidebar/ // 用来存放侧边栏结构
|   |   └-- default.json
|   └-- login.hbs
├-- template/
|   └-- popup-*.hbs // 各种编辑器表单
└-- index.html

开发项目

  1. 安装tp
  2. 复制index.html到根目录,复制index.jsconfig.jsjs/
  3. 修改index.html里的资源引用
  4. 修改config.js里的常量
  5. 创建Backbone风格的路由,在index.js里使用它
  6. 参考page/sidebar/default.json,创建符合需要的侧边栏数据
  7. 开发各业务功能页
  8. 在浏览器里打开index.html进行预览

更详细的组建使用会逐步添加。

二次开发

tp的侵入性在诸多框架当中是非常低的,大家可以随意组合、接入各种库,不太需要考虑冲突问题。

针对样式的二次开发

tp使用Bootstrap作为基础,所以几乎任何基于Bootstrap的样式库都可以直接使用。

tp自己的样式放在sass/文件夹中,用户可以直接引用,进行修改。

针对功能的二次开发

tp提供了大量常用组件,以及编辑工具,足以覆盖大部分办公场景。

但是,企业级场景更复杂,难免碰到力有不逮需要二次开发的时候。tp的二次开发非常简单。首先,tp是基于Backbone的,后者是一个MV*框架;其次,“组件化”是tp的指导原则。所以,基于tp的二次开发应当这样进行:

  1. 创建基于Backbone.View的组件
  2. 将组件注册到特定选择器上
  3. 完成

协议

本项目在MIT下发布。

TODO

  1. 自动化创建项目
  2. 详细文档