Tutorial

Firede edited this page Apr 30, 2014 · 14 revisions

使用教程

Saber 的安装与管理都是通过强大的 edp

Saber 1.0 要求 edp 版本 >= 1.0.0

安装

Saberedp 扩展 的形式,提供了强大构建工具 edpx-mobile,我们需要按照以下顺序搭建开发环境

安装 Node

edp 基于 node.jsnpm

安装 edp

npm install -g edp

若想了解更多的安装说明可移步这里

安装 edpx-mobile

edpx-mobile在第一次使用mobile相关命令时会自动安装,也可以使用以下方式手动安装

edp install edpx-mobile

至此,Saber 开发环境搭建完毕。 亲,是不是很 easy ~~

命令

安装后,就可以使用 Saber 丰富的 CLI 命令了

  • init 项目初始化

  • add 模块添加

  • start 调试器管理

edp mobile init xxx

开始一个项目

环境搭建好了,让我们来创建一个实际项目来体验下 Saber 带来的快感 ~~

初始化

新建一个 SPA(Single Page Application) 项目

edp mobile init spa

项目构建时,所有默认的依赖模块都会自动导入的哦 ~~

项目结构如下:

├───  .edpproj/
├───  dep/
├───  node_modules/
├──┬  src/
│  ├───  app.js
│  └───  config.js
├───  edp-build-config.js
├───  edp-webserver-config.js
├───  edp-watch-config.js
├───  index.html
├───  module.conf

默认的依赖模块包括mvp框架saber-firework、异步交互模块saber-ajax与UI样式框架rider-ui,同时也引入了方便开发的saber-langsaber-domsaber-promise等基础组件

至此,一个SPA项目创建初始化完毕 ~~

开发调试

导入包

啊!! 遇到繁琐的字符串处理了,show me the string

edp import saber-string
var string = require( 'saber-string' );
...

哈哈哈 ~~ 果然简单 !

Saber 提供了丰富的模块移动业务开发使用。没有做不到,只有您想不到

开发

万事俱备,只欠coding ~ 那就添加几个业务模块玩玩

Saber 提供了灰常方便的 add 命令哦~~

让我们来添加一个基本的 完整模块 (含 路由MVP模板) 试试

edp mobile add /hello

没错,就是这么简单、可依赖 ~~

此时,路由配置文件 config.js 会自动增加对应配置信息

{ path: '/hello', action: require('./hello') }

以及自动创建相关的 MVPTemplate 文件

./hello.js
./helloModel.js
./helloView.js
./hello.tpl

至此,我们创建了一个完整的 /hello 模块 ~

不满意? 我们可以添加稍微复杂一点的

edp mobile add /goodbye/saber

是不是简单依旧?

此时,路由配置文件 config.js 会自动增加对应配置信息

{ path: '/goodbye/saber', action: require('./goodbye/saber') }

以及自动创建相关的 MVP模板 文件

./goodbye/saber.js
./goodbye/saberModel.js
./goodbye/saberView.js
./goodbye/saber.tpl

至此,我们创建了一个完整的 /goodbye/saber 模块 ~

还不满意? 我们再添加个 /miss/ 模块 (注意末尾的 /)

edp mobile add /miss/

此时,路由配置文件 config.js 会自动增加对应配置信息

{ path: '/miss/index', action: require('./miss/index') }

以及自动创建相关的 MVP模板 文件

./miss/index.js
./miss/indexModel.js
./miss/indexView.js
./miss/index.tpl

至此,我们创建了一个完整的 /miss/ 模块 ~

烦捆绑?要特殊服务? 有! 看客官需要,应有尽有:

我就想加个 Action

edp mobile add action /play/snooker

config.js 会自动增加对应配置

{ path: '/play/snooker', action: require('./play/snooker') }

以及自动创建对应的Action文件

./play/snooker.js

我就想加个 Model

edp mobile add model /play/saber

对应的Model文件会自动创建

./play/saberModel.js

我就想加个 View

edp mobile add view /play/yard

对应的View文件会自动创建

./play/yardView.js

我就想加个 Template

edp mobile add template /play/game

对应的Template文件会自动创建

./play/game.tpl

调试

一直埋头 coding 不知效果如何,好忐忑 ~

表怕,Saber 早有准备,内置了 WebServer 支持

edp mobile start server

打开浏览器,访问以下地址欣赏吧 ~

http://localhost:8848

想给小伙伴们看?用启动后的输出提示里的带IP的URL就行

edp INFO EDP WebServer start, http://192.168.1.2:8848
edp INFO root = [/your_app_root_path], listen = [8848]

讨厌 F5,就要 Live Reload ?

edp mobile start watch

试试,随便改个文件 保存 下,看看浏览器是不是神奇自动刷新啦。。啦。。

我很懒,我就想一个命令全都搞定,有 WebServer 也有 LiveReload !!

edp mobile start

这下清爽,舒服了吧 ~

构建项目

Coding 完工,是时候来看看如何发布编译啦 ~

edp build --stage=release

是的,您没看错,就是这么简单 ~~

编译输出目录结构大致如下:

├──┬  asset/
│  ├───  ...
│  ├───  app.js
├──┬  dep/
│  ├───  ...
│  └───  saber-firework/
├───  index.html

--starge=release 和 不带有什么区别?

编译配置默认存在两种处理器组合 defaultrelease

release 组合会进行压缩合并等更深度的优化工作

想了解更详细的 edp build 使用 ?

edp build --help

您会找到您所需要的

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.