Repository: incubator-weex
Updated Branches:
  refs/heads/dev 9745b74b4 -> 8fa5c936a


add toolkit document


Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/49f4d21d
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/49f4d21d
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/49f4d21d

Branch: refs/heads/dev
Commit: 49f4d21d38b43fb215bf54c1afafd5a2b98bc85f
Parents: 1cbdcb5
Author: JackPu <kakashj...@gmail.com>
Authored: Thu Mar 16 18:52:27 2017 +0800
Committer: JackPu <kakashj...@gmail.com>
Committed: Thu Mar 16 18:52:27 2017 +0800

----------------------------------------------------------------------
 doc/source/cn/guide/tools/devtools.md | 111 ---------
 doc/source/cn/guide/tools/index.md    |   3 +-
 doc/source/cn/guide/tools/toolkit.md  | 233 +++++++++++++++++
 doc/source/cn/guide/tools/weexpack.md | 388 -----------------------------
 doc/source/guide/tools/devtools.md    | 100 --------
 doc/source/guide/tools/index.md       |   3 +-
 doc/source/guide/tools/toolkit.md     | 202 +++++++++++++++
 doc/source/guide/tools/weexpack.md    | 300 ----------------------
 8 files changed, 437 insertions(+), 903 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/49f4d21d/doc/source/cn/guide/tools/devtools.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/guide/tools/devtools.md 
b/doc/source/cn/guide/tools/devtools.md
deleted file mode 100644
index 7e56161..0000000
--- a/doc/source/cn/guide/tools/devtools.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: 使用 Devtools
-type: guide
-order: 5.1
-version: 2.1
-has_chapter_content: true
----
-
-# Devtools
-
-**weex devtools** 是专门为 Weex 定制的一款实现了 [**Chrome 
Debugging 
Protocol**](https://developer.chrome.com/devtools/docs/debugger-protocol) 的 
inspect/debug 工具,能够帮助你快速查看 app 运行状态和调试 
weex 中的 Javascript 代码,当前支持 **iOS** 和 **Android** 
两个平台。
-
-1. 支持 Android 和 iOS 调试
-2. 支持真机和模拟器
-3. 可以检查 native Elements, vdom, network, Console, Resource
-4. 可以调试 js/wx/Rx 等前端源码文件
-5. 支持同时在前端文件和 native (Android/iOS) 文件上断点调试
-6. 支持远程调试,不需要真机 USB 连接电脑
-7. 支持 screencast 和 select element 功能
-8. 支持同时调试多个应用和客户端
-
-## 安装
-
-```
-$ npm install  -g  weex-toolkit
-```
-
-## 用法
-
- weex debug [options] [we_file|bundles_dir]
-
-  选项:
-
-```
--h, --help           显示帮助
--V, --verbose        显示 debug 服务器运行时的各种 log
--v, --version        显示版本
--p, --port [port]    设置 debug 服务器端口号 默认为 8088
--e, --entry [entry]  debug 一个目录时,这个参数指定整个目录的å…
¥å£ bundle 文件,这个 bundle 
文件的地址会显示在debug主页上(作为二维码)
--m, --mode [mode]    设置构建we文件的方式, transformer 
最基础的风格适合单文件, loader:wepack 风格 
适合模块化的多文件。默认为 transformer
-```
-
-#### 开启调试
-
-```
-$ weex debug
-```
-
-单纯启动一个调试服务器,并同时唤起chrome浏览器打开`调试主页`.
-这个`调试主页`上会有一个二维码,使用Playground 
App扫这个二维码可以开启Playground调试.
-开启调试后,设备列表中会出现您的设备,æ 
¹æ®æç¤ºè¿›è¡ŒåŽç»­çš„调试操作
-#### 调试 we文件
-
-```
-$weex debug your_weex.we
-```
-
-这个命令会将your_weex.we编译成bundlejs文件 部署到debug服务器
-并启动debug服务器如上述命令那æ 
·.打开的`调试主页`会多显示一个二维码,使用playground app
-扫这个码可以加载your_weex.we.(注意要先扫描开启调试的那个ç 
)
-这个命令会自动检测your_weex.we文件变动,如果发现内
容被修改则立即重新编译部署,并刷新debugger页面
-.
-#### 调试整个bundle/we文件夹
-
-```
-$weex debug your/we/path  -e index.we
-```
-
-这个命令会编译你
指定目录下的所有的we文件,并把编译好的bundlejs部署到debug服务器,他们的地址会æ˜
 å°„到 http://lcoalhost:8088/weex/ 下
-比如 your/we/path/`index.we` 
可以通过http://lcoalhost:8088/weex/index.js访问  
-your/we/path/`demo/test.we` 
可以通过http://lcoalhost:8088/weex/demo/index.js  
-
--e参数可以指定一个å…
¥å£çš„we文件,这个文件的地址会显示在`调试主页`上(作为二维ç
 )
-## 特性
-### 连接设备
-
-![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png)
-### Inspector
-
- Inspector 能够用来查看 `Element` \ `NetWork` \ `Console log` \ 
`ScreenCast` \ `BoxModel` \ `Native View` 等。
-
-![devtools-inspector](https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png)
-#### Element
-
-![inspector-element](https://img.alicdn.com/tps/TB1.02bKFXXXXXwaXXXXXXXXXXX-2880-1800.png)
-#### NetWork
-##### 查看网络请求的总耗时和延时
-
-![inspector-network](https://img.alicdn.com/tps/TB1NjO_KFXXXXcaaXXXXXXXXXXX-2880-1800.png)
-##### 查看网络请求的header和response
-
-![inspector-network](https://img.alicdn.com/tps/TB1ck6lKFXXXXbZXFXXXXXXXXXX-2880-1800.png)
-#### 控制台
-
-![inspector-console](https://img.alicdn.com/tps/TB1a7HqKFXXXXXMXFXXXXXXXXXX-2880-1800.png)
-#### 资源
-
-![inspector-resource](https://img.alicdn.com/tps/TB1oY6cKFXXXXXQaXXXXXXXXXXX-2880-1800.png)
-### Debugger
-
- 调试器用来调试weex中的js代码,能够设置断点、查看调用æ 
ˆã€‚ 
-
-![devtools-debugger](https://img.alicdn.com/tps/TB1aPTEKFXXXXXaXXXXXXXXXXXX-1436-813.png)
-##### Breakpoint and CallStack
-
-![debugger-breakpoint](https://img.alicdn.com/tps/TB1_trbKFXXXXc0XVXXXXXXXXXX-2880-1800.png)
-#### 集成devtools
-- Android
-  - 请参考文档 [Weex devtools 
(Android)](../../references/advanced/integrate-devtool-to-android.html), å…
¶ä¸­æœ‰è¯¦ç»†è¯´æ˜Žã€‚
-- IOS
-  - 请参考文档 [Weex devtools 
(iOS)](../../references/advanced/integrate-devtool-to-ios.html), å…
¶ä¸­æœ‰è¯¦ç»†è¯´æ˜Žã€‚

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/49f4d21d/doc/source/cn/guide/tools/index.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/guide/tools/index.md 
b/doc/source/cn/guide/tools/index.md
index b570faa..cd2c226 100644
--- a/doc/source/cn/guide/tools/index.md
+++ b/doc/source/cn/guide/tools/index.md
@@ -7,5 +7,4 @@ version: 2.1
 
 # 周边工具  
 
-- [Devtools](./devtools.html)
-- [Weexpack](./weexpack.html)
+- [weex-toolkit](./toolkit.html)

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/49f4d21d/doc/source/cn/guide/tools/toolkit.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/guide/tools/toolkit.md 
b/doc/source/cn/guide/tools/toolkit.md
new file mode 100644
index 0000000..c082bee
--- /dev/null
+++ b/doc/source/cn/guide/tools/toolkit.md
@@ -0,0 +1,233 @@
+---
+title: 使用 weex-toolkit
+type: guide
+order: 5.1
+version: 2.1
+---
+
+# weex-toolkit
+
+[weex-toolkit](https://github.com/weexteam/weex-toolkit) 
是官方提供的一个脚手架命令行工具,你
可以使用它进行Weex项目的创建,调试以及打包等功能。
+
+### 安装
+
+使用npm安装:
+
+``` bash
+$ npm install -g weex-toolkit
+```
+安装成功后,你输入 `weex`应该可以看到下面的提示效果;
+
+![weex-commands](https://img.alicdn.com/tfs/TB1NBhdQXXXXXXzXFXXXXXXXXXX-712-343.png)
+
+如果你本地没有安装node.js你
可以前往[官网](https://nodejs.org/en/)下载安装。
+
+*请确保你的node 版本是>=6,你可以使用 [n](https://github.com/tj/n) 
来进行node的版本管理*
+
+中国用户如果npm遭遇网络问题,可以使用淘宝的 cnpm 镜像, 
[cnpm](https://npm.taobao.org/):
+
+``` bash
+$ npm install -g cnpm --registry=https://registry.npm.taobao.org
+$ cnpm install -g weex-toolkit
+```
+
+如果你安装的过程中遇到了问题,比如*permission error*你
可以去[weex-toolkit 
issues](https://github.com/weexteam/weex-toolkit/issues)找到解决方法。
+
+
+### 初始化 weex 项目
+
+
+```bash
+$ weex init awesome-project
+```
+
+执行完命令后,在 `awesome-project` 目录中就创建了一个使用 
Weex 和 Vue 的模板项目。
+
+
+然后我们进入项目所在路径,weex-toolkit 已经为我们生成了æ 
‡å‡†é¡¹ç›®ç»“构。
+
+在 `package.json` 中,已经配置好了几个常用的 npm 
script,分别是:
+
+- `build`: 源码打包,生成 JS Bundle
+- `dev`: webpack watch 模式,方便开发
+- `serve`: 开启静态服务器
+- `debug`: 调试模式
+
+我们先通过 `npm install` 安装项目依赖。之后运行 `npm run dev` 
和 `npm run serve` 开启watch 模式和静态服务器。
+
+然后我们打开浏览器,进入 `http://localhost:8080/index.html` 
即可看到 weex h5 页面。
+
+
+### 实时预览
+
+weex-toolkit支持预览你当前开发的weex页面(.we或者.vue),你
只需要指定预览的文件路径即可:
+
+``` bash
+$ weex src/foo.vue 
+```
+
+浏览器会自动弹出页面,这个时候你可以看到你
所编辑的weex页面的具体效果和页面布局。如果你
使用[playground](https://weex.apache.org/cn/playground.html)扫描右边的二维ç
 ,就能够看到weex在 android/iOS 设备上的效果了。
+
+如果你需要预览整个项目目录,你可以输入这样的命令:
+
+``` bash
+$ weex src --entry src/foo.vue
+```
+你需要在传入的参数指定预览的目录和入口文件。
+
+### 打包weex项目
+
+如果开发完成后,你可以使用`weex compile`通过命令行工å…
·è¿›è¡Œå•ä¸ªæ–‡ä»¶æˆ–者整个项目的打包。
+
+``` bash
+weex compile src/foo.vue dist
+```
+命令行需要两个参数,你的源码文件或者目录, 以及你
生成打包后的目录地址。
+
+
+
+### 调试 weex 页面
+
+weex-toolkit支持调试工具**weex 
devtools**,它是专门为weex定制的一款实现了[**Chrome Debugging 
Protocol**](https://developer.chrome.com/devtools/docs/debugger-protocol)的inspect/debugå·¥å
…·ï¼Œèƒ½å¤Ÿå¸®åŠ©ä½ 
快速查看app运行状态和调试weex中的Javascript代ç 
ï¼Œå½“前支持**IOS**和**Android**两个平台。
+
+#### 用法
+
+``` bash
+ weex debug [options] [we_file|bundles_dir]
+ ```
+
+  选项:
+
+```
+-h, --help           显示帮助
+-V, --verbose        显示debug服务器运行时的各种log
+-v, --version        显示版本
+-p, --port [port]    设置debug服务器端口号 默认为8088
+-e, --entry [entry]  debug一个目录时,这个参数指定整个目录的å…
¥å£bundle文件,这个bundle文件的地址会显示在debug主页上(作为二维ç
 )
+-m, --mode [mode]    设置构建we文件的方式,transformer 
最基础的风格适合单文件,loader:wepack风格 
适合模块化的多文件.默认为transformer
+```
+#### 开启调试
+
+```
+$ weex debug
+```
+
+单纯启动一个调试服务器,并同时唤起chrome浏览器打开`调试主页`.
+这个`调试主页`上会有一个二维码,使用Playground 
App扫这个二维码可以开启Playground调试.
+开启调试后,设备列表中会出现您的设备,æ 
¹æ®æç¤ºè¿›è¡ŒåŽç»­çš„调试操作
+
+#### 调试 we|vue文件
+
+```
+$ weex debug your_weex.vue
+```
+
+这个命令会将your_weex.vue编译成bundlejs文件 部署到debug服务器
+并启动debug服务器如上述命令那æ 
·.打开的`调试vue主页`会多显示一个二维码,使用playground app
+扫这个码可以加载your_weex.we.(注意要先扫描开启调试的那个ç 
)
+这个命令会自动检测your_weex.we文件变动,如果发现内
容被修改则立即重新编译部署,并刷新debugger页面
+.
+#### 调试整个bundle/we文件夹
+
+同样你也可以调试整个目录的文件,你只需要传å…
¥ç›®å½•çš„路径和 入口文件即可
+
+```
+$weex debug your/we/path  -e index.we
+```
+
+这个命令会编译你
指定目录下的所有的we文件,并把编译好的bundlejs部署到debug服务器,他们的地址会æ˜
 å°„到 http://lcoalhost:8088/weex/ 下
+比如 your/we/path/`index.we` 
可以通过http://lcoalhost:8088/weex/index.js访问  
+your/we/path/`demo/test.we` 
可以通过http://lcoalhost:8088/weex/demo/index.js  
+
+-e参数可以指定一个å…
¥å£çš„we文件,这个文件的地址会显示在`调试主页`上(作为二维ç
 )
+
+#### 特性
+##### 连接设备
+
+![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png)
+##### Inspector
+
+ Inspector 能够用来查看 `Element` \ `NetWork` \ `Console log` \ 
`ScreenCast` \ `BoxModel` \ `Native View` 等。
+
+![devtools-inspector](https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png)
+##### Element
+
+![inspector-element](https://img.alicdn.com/tps/TB1.02bKFXXXXXwaXXXXXXXXXXX-2880-1800.png)
+##### NetWork
+##### 查看网络请求的总耗时和延时
+
+![inspector-network](https://img.alicdn.com/tps/TB1NjO_KFXXXXcaaXXXXXXXXXXX-2880-1800.png)
+##### 查看网络请求的header和response
+
+![inspector-network](https://img.alicdn.com/tps/TB1ck6lKFXXXXbZXFXXXXXXXXXX-2880-1800.png)
+##### 控制台
+
+![inspector-console](https://img.alicdn.com/tps/TB1a7HqKFXXXXXMXFXXXXXXXXXX-2880-1800.png)
+##### 资源
+
+![inspector-resource](https://img.alicdn.com/tps/TB1oY6cKFXXXXXQaXXXXXXXXXXX-2880-1800.png)
+#### Debugger
+
+ 调试器用来调试weex中的js代码,能够设置断点、查看调用æ 
ˆã€‚ 
+
+![devtools-debugger](https://img.alicdn.com/tps/TB1aPTEKFXXXXXaXXXXXXXXXXXX-1436-813.png)
+##### Breakpoint and CallStack
+
+![debugger-breakpoint](https://img.alicdn.com/tps/TB1_trbKFXXXXc0XVXXXXXXXXXX-2880-1800.png)
+#### 集成devtools
+- Android
+  - 请参考文档 [Weex devtools 
(Android)](../../references/advanced/integrate-devtool-to-android.html), å…
¶ä¸­æœ‰è¯¦ç»†è¯´æ˜Žã€‚
+- IOS
+  - 请参考文档 [Weex devtools 
(iOS)](../../references/advanced/integrate-devtool-to-ios.html), å…
¶ä¸­æœ‰è¯¦ç»†è¯´æ˜Žã€‚
+  
+  
+### weex-toolkit 对 weexpack的水平扩展
+
+[weexpack](https://github.com/weexteam/weex-pack) 是基于 weex 
快速搭建应用原型的利器。它能够帮助开发者
通过命令行创建 Weex 工程,添加相应平台的 Weex app 
模版,并基于模版从本地、GitHub 或者 Weex 应用市场安装
插件,快速打包 Weex 应用并安装到手机运行,对于å…
·æœ‰åˆ†äº«ç²¾ç¥žçš„开发者而言还能够创建 Weex 
插件模版并发布插件到 Weex 应用市场。
+
+现在使用weex-toolkit同样支持对weexpack的命令调用,如果你
当前的项目与weexpack生成的项目目录一致,那么你
可以直接实现对于platform的操作,从而构建具体的android/ios 
app.
+
+### weex platform 以及 run 命令
+
+如果我们希望在模拟器或者
真机上查看weex运行的效果,我们可以使用 platform 添加或者删
除 Weex应用模板。
+
+``` bash
+$ weex platform add ios 
+```
+在第一次使用platform/plugin命令的时候,可能会遇到下面的界面,ä½
 åªéœ€è¦è¾“å…¥Y或者直接enter键即可。
+![install 
weexpack](https://gw.alicdn.com/tfs/TB19n4AQXXXXXawXVXXXXXXXXXX-577-70.png)
+
+添加ios平台,然后这个时候只要输入:
+
+``` bash
+$ weex run ios
+```
+
+就能看到启动的模拟器运行的效果了。
+
+
+### weex plugin 命令
+
+如果你
想使用[插件市场](https://market.weex-project.io/)的插件,你
可以使用
+
+```bash
+$ weex plugin add plugin_name
+```
+
+你只需要输入插件的名称就可以从远程添加插件到你
本地的项目,比如添加weex-chart,我们可以输入命令:
+
+``` bash
+$ weex plugin add weex-chart
+```
+
+
+我们可以使用`plugin remove`移除插件,比如移除安装
好的weex-cahrt:
+
+``` bash
+$ weex plugin remove weex-chart
+```
+
+关于weexpack 更加详细的介绍,你可以阅读 
[官方文档](https://github.com/weexteam/weex-pack)
+
+
+

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/49f4d21d/doc/source/cn/guide/tools/weexpack.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/guide/tools/weexpack.md 
b/doc/source/cn/guide/tools/weexpack.md
deleted file mode 100644
index d570e4a..0000000
--- a/doc/source/cn/guide/tools/weexpack.md
+++ /dev/null
@@ -1,388 +0,0 @@
----
-title: 使用 Weexpack
-type: guide
-order: 5.2
-version: 2.1
----
-
-# 使用 Weexpack
-
-## weexpack 介绍
-
-weexpack 是 weex 新一代的工程开发套件,是基于 weex 
快速搭建应用原型的利器。它能够帮助开发者
通过命令行创建 Weex 工程,添加相应平台的 Weex app 
模版,并基于模版从本地、GitHub 或者 Weex 应用市场安装
插件,快速打包 Weex 应用并安装到手机运行,对于å…
·æœ‰åˆ†äº«ç²¾ç¥žçš„开发者而言还能够创建 Weex 
插件模版并发布插件到 Weex 应用市场。
-
-**注意:** weexpack 目前暂不支持搭建 Vue 2.0 版本的 Weex。
-
-weexpack 所提供的命令大致可分为三组,分别是:
-
-* 打包命令
- * **weexpack create** — 创建 Weex 工程项目。
- * **weexpack platform add/remove** — 安装/移除 Weex 
应用模版,默认模版支持 Weex bundle 调试和插件机制。
- * **weexpack platform list** — 查看已安装的平台模版及版本。
- * **weexpack platform run** - 打包应用并安装到设备运行。
-
-
-* 插件使用者命令
- * **weexpack plugin add/remove** — 安装/移除 Weex 
插件,支持从本地、GitHub 或者  Weex 应用市场安装插件。
-
- * **weexpack plugin list** — 查看已安装的插件及版本。
-
-
-* 插件开发者命令
-
- * **weexpack plugin create** - 生成 Weex 插件模版,主要是é…
ç½®æ–‡ä»¶å’Œå¿…需的目录。
- * **weexpack plugin publish** - 发布插件到 Weex 插件市场。
-
-
-## 安装
-
-### 环境要求
-
- - 目前支持 Mac、windows、linux 平台 ( windows 下仅能打包 android 
)。
- - 配置 [Node.js][1] 环境,并且安装 [npm][2] 包管理器 (`需要 
node6.0+`)。
- - 如果要支持 iOS 平台则需要配置 iOS 开发环境:
-     - 安装 [Xcode IDE][3] ,启动一次 Xcode ,使 Xcode 自动安装
开发者工具和确认使用协议。
-     - 安装 cocoaPods。
- - 如果要支持 Android 平台则需要配置 Android 开发环境:
-    - 安装 [Android Studio][4](推荐)或者 [Android SDK][7]。打开 
[AVD Manager][5] ,新建 Android 模拟器并启动(如果有安装 
[Docker][6] ,请关闭 Docker Server )。
-    - 保证 Android build-tool 的版本为 23.0.2。
-
-#### 安装命令
-
-首先,全局安装 weex-pack 命令:
-
-```bash
-$ npm install -g weexpack
-```
-
-或者 在 clone 的 weexpack 根目录下执行
-
-```bash
-$ npm install
-```
-
-## 打包及插件使用
-
-打包主要过程如下图所示,其中插件操作是打包
过程的可选项,不是必须的。
-
-![weexpack1](https://img.alicdn.com/tps/TB1.bpVPXXXXXarapXXXXXXXXXX-462-310.png)
-
-### 详细步骤
-
-#### 1. 创建 weexpack 工程
-
-```bash
-$ weexpack create appName
-```
-
-生成工程的目录如下:
-
-```
-WeexProject
-├── README.md
-├── android.config.json
-├── config.xml
-├── hooks
-│   └── README.md
-├── ios.config.json
-├── package.json
-├── platforms     // 平台模版目录
-├── plugins       // 插件下载目录
-│   └── README.md
-├── src           // 业务代码(we文件)目录
-│   └── index.we
-├── start
-├── start.bat
-├── tools
-│   └── webpack.config.plugin.js
-├── web
-│   ├── index.html
-│   ├── index.js
-│   └── js
-│       └── init.js
-└── webpack.config.js
-```
-
-通过 create 命令创建的工程默认不包含 iOS 和 Android 
工程模版,创建完成之后就可以切换到 appName 目录下并安装
依赖。
-
-```bash
-$ cd appName && npm install
-```
-
-#### 2. 安装 Weex 应用模版
-
-添加应用模版,官方提供的模版默认支持 Weex bundle 
调试和插件机制,注意模版名称均为小写,模版被安装到 
platforms 目录下。
-
-* android 模版
-
-  ```bash
-  $ weexpack platform add android
-  ```
-
-* iOS 模版
-
-  ```bash
-  $ weexpack platform add ios
-  ```
-
-android 平台,安装后 platforms 目录如下
-
-```
-platforms
-└── android
-    ├── LICENSE
-    ├── NOTICE
-    ├── README.md
-    ├── app
-    │   ├── build
-    │   ├── build.gradle
-    │   ├── proguard-rules.pro
-    │   └── src
-    ├── appframework
-    │   ├── build
-    │   ├── build.gradle
-    │   ├── proguard-rules.pro
-    │   └── src
-    ├── build
-    │   └── generated
-    ├── build.gradle
-    ├── codeStyleSettings.xml
-    ├── gradle
-    │   └── wrapper
-    ├── gradle.properties
-    ├── gradlew
-    ├── gradlew.bat
-    ├── settings.gradle
-    └── weexplugin
-        ├── build.gradle
-        ├── proguard-rules.pro
-        └── src 
-                              
-```
-
-ios平台,安装后 platforms 目录如下
-  
-```
-platforms
-   └── ios
-       ├── LICENSE
-       ├── Podfile
-       ├── README.md
-       ├── WeexDemo
-       │   ├── AppDelegate.h
-       │   ├── AppDelegate.m
-       │   ├── Assets.xcassets
-       │   ├── DemoDefine.h
-       │   ├── Images.xcassets
-       │   ├── WeexConfig
-       │   ├── WeexDemo-Info.plist
-       │   ├── WeexScanner
-       │   ├── config.xml
-       │   ├── main.m
-       │   └── weex-icon.png
-       ├── WeexDemo.xcodeproj
-       │   ├── project.pbxproj
-       │   ├── project.xcworkspace
-       │   ├── xcshareddata
-       │   └── xcuserdata
-       ├── WeexDemo.xcworkspace
-       │   ├── contents.xcworkspacedata
-       │   ├── xcshareddata
-       │   └── xcuserdata
-       ├── WeexDemoTests
-       │   ├── Info.plist
-       │   └── WeexDemoTests.m
-       ├── WeexUITestDemo-Info.plist
-       ├── WeexUITestDemoUITests
-       │   ├── Info.plist
-       │   └── WeexUITestDemoUITests.m
-       ├── Weexplugin
-       │   ├── Podfile
-       │   ├── Weexplugin
-       │   ├── Weexplugin.podspec
-       │   ├── Weexplugin.xcodeproj
-       │   └── WeexpluginTests
-       ├── bundlejs
-  
-  ```
-
-对于已安装的模版可以使用 weexpack platform list 命令查看。
-
-* 查看已安装模版
-
-  ```bash
-  $ weexpack platform list
-  ```
-
-  示例结果:
-
-  ```
-  Installed platforms:
-    android
-  Available platforms:
-    android ^6.2.1
-  ```
-    
-如果想要删除某个不需要的平台可以使用 weexpack platform 
remove 移除,比如 Windows 平台用户是不需要 iOS 
模版的,可用如下命令移除。
-
-
-* 移除相应平台模版
-
-  ```bash
-  $ weexpack platform remove ios
-  ```
-
-#### 3. 安装 Weex 插件(可选项)
-
-添加想要使用的插件,支持从本地或者 Weex 应用市场安装
插件。
-
-* 从本地添加插件,在开发插件时会经常用到
-
-  ```bash
-  $ weexpack plugin add path/to/plugin
-  ```
-
-* 从插件市场添加插件,例如 weex-chart。
-
-  ```bash
-  $ weexpack plugin add weex-chart
-  ```
-
-模版的 weexplugin 是插件安装的目标工程。以 Android 为例,å…
¶ç›®å½•å¦‚下:
-
-```
-weexplugin
-├── build.gradle  //  插件编译脚本,工具自动维护
-├── libs
-├── proguard-rules.pro
-├── src
-│   └── main
-│       ├── AndroidManifest.xml // 插件android manifest配置文件
-│       ├── java
-│       │   ├── // 插件src安装目录
-│       │   └── com
-│       │       └── alibaba
-│       │           └── weex
-│       │               └── plugin
-│       │                   ├── ConfigXmlParser.java // é…
ç½®æ–‡ä»¶è§£æžå™¨
-│       │                   ├── PluginConfig.java    // 外部接口
-│       │                   ├── PluginEntry.java     // 插件描述
-│       │                   └── PluginManager.java   // 
插件管理器
-│       └── res // 插件资源安装目录
-│           ├── drawable
-│           ├── values
-│           │   └── strings.xml
-│           └── xml
-│               └── config.xml // 插件配置文件,PluginManager 
解析配置文件加载插件
-```
-
-对于已安装的插件可以使用 weexpack plugin list 命令查看。
-
-* 查看已安装插件
-
-  ```bash
-  $ weexpack plugin list
-  ```
-
-如果想要删除某个不需要的插件可以使用 weexpack plugin remove 
移除,比如 weex-chart
-
-* 移除插件,例如 weex-chart
-
-  ```bash
-  $ weexpack plugin remove weex-chart
-  ```
-
-
-
-#### 4. 打包应用并安装运行
-
-完成以上步骤并 Weex 代码放在 src 目录下,就可以打包
运行了,打包过程中可能要下载依赖和编译工å…
·ï¼Œè¿™ä¼šæ˜¯ä¸ªè¾ƒä¸ºè€—时的过程,安装运行需要打开模拟器或者
连接设备。
-
-* 打包运行 android 应用
-
-  ```bash
-  $ weexpack run android
-  ```
-
-  你可以更改项目目录下的 android.config.json
-    * AppName: 应用名
-    * AppId: application_id 包名
-    * SplashText: 欢迎页上面的文字
-    * WeexBundle: 指定的 Weex bundle 文件(支持文件名和 url 
的形式)
-
-  文件名则以本地文件的方式加载 bundle, url 
则以远程的方式加载 bundle
-  如果以本地方式指定 bundle, `.we` 文件请放到 src 目录。
-
-* 打包运行 iOS 应用
-  * 模拟器运行
-
-  ```bash
-  $ weexpack run ios
-  ```
-
-  * 构建 ipa 包
-
-  ```bash
-  $ weexpack build ios
-  ```
-
-  构建包的过程中,将会提示让您输入 
`CodeSign(证书)`,`Profile(provisioning profile)`,`AppId`,只有输å…
¥çœŸå®žçš„这些信息才能成功打包。
-  其余如 AppName , 和入口 Weex bundle 
文件可以编辑项目目录下的 ios.config.json 配置。
-  打完包成功之后,可以在 `/playground/build/ipa_build/` 
目录下获取 ipa 文件
-
-  **注:证书需要预先安装到 keychain 中,在 keychain 
中点击右键获取证书 `id`(证书名称),`provisioning profile` 
文件(*mobileprovision)需要获取 UUID,进å…
¥[目录](https://github.com/weexteam/weex-pack/tree/dev/generator/platforms/templates)
 可以看到 `mobileprovision_UUID.sh` 文件,此文件可以获取到 UUID**
-
-  `mobileprovision_UUID.sh` 用法如下:
-  
-  ```bash
-  $  ./mobileprovision_UUID.sh   \*mobileprovision
-  ```
-
-  参数(\*mobileprovision)为 `provisioning profile` 文件路径
-
-* 打包 Web 平台:
-
-  ```bash
-  $ weexpack build web
-  ```
-     
-  这样你可以把打包后的资源上传到 CDN 服务器,然后上线你
的 Web 项目。
-  
-* 在 Web 平台运行:
-
-  ```bash
-  $ weexpack run web
-  ```
-     
-#### 5.现有应用集成插件 —— 组件容器
-
-* 组件容器作用
-
-  
插件可以通过组件容器的方式集成到客户端(app),组件容器可以方便生成二进制åŒ
…,现有应用可以通过各种形式把二进制包或源ç 
é›†æˆè¿›åŽ»ï¼Œæ¯”如 iOS 可以通过 pod 依赖   的形式等。在 
weexpack 创建的根目录下,运行 weexpack plugin add/remove 
命令直接安装/删除 Weex plugin 到组件容器中。
-
-* 组件容器获取
-       * 方式1:通过第二步<sup>[[link](#weex-plugin)]</sup>生成的 
Android/iOS 目录中包含 Weexplugin 目录,此目录是组件容器
-       * 方式2:通过 repo 地址 clone 代码 
[iOS地址](https://github.com/weexteam/weexpluginContainer-iOS) [Android 
地址](https://github.com/weexteam/weexplugin-android) 
-
-## 插件发布
-
-对于插件开发者
来说,也有一组用于创建和发布插件的命令,[前往](./README_plugin.md)
 查看详细文档
-
-![weexpack2](https://img.alicdn.com/tps/TB18hxjPXXXXXXgapXXXXXXXXXX-248-258.png)
-
-## 插件开发文档
-
-+ [开发 web 
的插件教程](https://github.com/weexteam/weex-pack/blob/master/doc/plugin-devloping-web.md)
-
-
-## 示例
-[使用 Weexpack 打包出一个 Weex 版的 《One 
App》](https://github.com/weexteam/weex-pack/wiki/Create-Weex-One-App-with-Weexpack)
-
-[1]: https://nodejs.org/
-[2]: https://www.npmjs.com/
-[3]: https://itunes.apple.com/us/app/xcode/id497799835?mt=12
-[4]: https://developer.android.com/studio/install.html
-[5]: https://developer.android.com/studio/run/managing-avds.html
-[6]: https://www.docker.com/
-[7]: https://developer.android.com/studio/releases/sdk-tools.html
-[8]: https://developer.android.com/studio/run/managing-avds.html

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/49f4d21d/doc/source/guide/tools/devtools.md
----------------------------------------------------------------------
diff --git a/doc/source/guide/tools/devtools.md 
b/doc/source/guide/tools/devtools.md
deleted file mode 100644
index 24d2d07..0000000
--- a/doc/source/guide/tools/devtools.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Using Devtools  
-type: guide
-order: 5.1
-version: 2.1
----
-
-# Devtools
-
-Weex devtools is a custom devtools for weex that implements [Chrome Debugging 
Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol), it is 
designed to help you quickly inspect your app and debug your JS bundle source 
in a chrome web page, both Android and IOS platform are supported.
-
-## Install
-
-```
-   $ npm install  -g  weex-toolkit
-```
-#### usage
-```
-weex debug [options] [we_file|bundles_dir]
-
-  Options:
-
-    -h, --help           output usage information
-    -V, --verbose        display logs of debugger server
-    -v, --version        display version
-    -p, --port [port]    set debugger server port
-    -e, --entry [entry]  set the entry bundlejs path when you specific the 
bundle server root path
-    -m, --mode [mode]    set build mode [transformer|loader]
-    -w, --watch          watch we file changes auto build them and refresh 
debugger page![default enabled]
-```
-
-#### start debugger
-```
-$weex debug
-```
-this command will start debug server and launch a chrome opening `DeviceList` 
page.
-this page will display a qrcode ,you can use `Playground App` scan it for 
starting debug.
-
-#### start debugger with a we file
-```
-$weex debug your_weex.we
-```
-this command will compile `your_weex.we` to `your_weex.js`  and start the 
debug server as upon command.
-`your_weex.js` will deploy on the server and displayed in `DeviceList` page as 
 another qrcode contain the url of your_weex.js
-
-
-#### start debugger with a directory of we files
-```
-$weex debug your/we/path  -e index.we
-```
-this command will build every file in your/we/path and deploy them on the 
bundle server. your directory will mapping to  http://localhost:port/weex/ 
-use -e to set the entry of these bundles. and the url of "index.we" will 
display on device list page as another qrcode.
-
-## Features
-
-### Connect devices
-![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png
 "connecting (multiple) devices")
-
-### Inspector
- Inspector can be used to show your `Element` \ `Network` \ `Console log` \ 
`ScreenCast` \ `BoxModel` \ `Native View` and so on.
-
-![devtools-inspector](https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png
 "devtools-inspector")
-
-#### Element
-##### native view element
-![native-element](https://img.alicdn.com/tps/TB16L3ENXXXXXcsXVXXXXXXXXXX-2878-1798.png
 "native-element")
-
-##### weex dom element
-![dom-element](https://img.alicdn.com/tps/TB1TsMuNXXXXXcsaXXXXXXXXXXX-2450-1460.png
 "dom-element")
-
-#### Network
-
-##### show the total time and latency
-![inspector-network](https://img.alicdn.com/tps/TB1NjO_KFXXXXcaaXXXXXXXXXXX-2880-1800.png
 "inspector-network")
-
-##### show the header and response
-![inspector-network](https://img.alicdn.com/tps/TB1ck6lKFXXXXbZXFXXXXXXXXXX-2880-1800.png
 "inspector-network")
-
-#### Console
-![inspector-console](https://img.alicdn.com/tps/TB1a7HqKFXXXXXMXFXXXXXXXXXX-2880-1800.png
 "inspector-console")
-
-#### Resource
-![inspector-resource](https://img.alicdn.com/tps/TB1oY6cKFXXXXXQaXXXXXXXXXXX-2880-1800.png
 "inspector-resource")
-
-### Debugger
-
- Debugger can be used to debug your bundle js source, you can set `Breakpoint` 
\ watch `CallStack`.
- 
-![devtools-debugger](https://img.alicdn.com/tps/TB1aPTEKFXXXXXaXXXXXXXXXXXX-1436-813.png
 "devtools-debugger")
-
-#### Breakpoint and CallStack
-![debugger-breakpoint](https://img.alicdn.com/tps/TB1_trbKFXXXXc0XVXXXXXXXXXX-2880-1800.png
 "debugger-breakpoint")
-
-
-## Integrate devtools
-
-* Android
-    * See the doc [Weex devtools 
(Android)](../../references/advanced/integrate-devtool-to-android.html), it 
will lead you to config and use it step by step.
-* IOS
-    * See the doc [Weex devtools 
(iOS)](../../references/advanced/integrate-devtool-to-ios.html), it will lead 
you to config and use it step by step.

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/49f4d21d/doc/source/guide/tools/index.md
----------------------------------------------------------------------
diff --git a/doc/source/guide/tools/index.md b/doc/source/guide/tools/index.md
index ca087b1..83ce4dc 100644
--- a/doc/source/guide/tools/index.md
+++ b/doc/source/guide/tools/index.md
@@ -7,5 +7,4 @@ version: 2.1
 
 # Tools  
 
-- [Devtools](./devtools.html)
-- [Weexpack](./weexpack.html)
+- [weex-toolkit](./toolkit.html)

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/49f4d21d/doc/source/guide/tools/toolkit.md
----------------------------------------------------------------------
diff --git a/doc/source/guide/tools/toolkit.md 
b/doc/source/guide/tools/toolkit.md
new file mode 100644
index 0000000..662d51a
--- /dev/null
+++ b/doc/source/guide/tools/toolkit.md
@@ -0,0 +1,202 @@
+---
+title: use weex-toolkit
+type: guide
+order: 5.1
+version: 2.1
+---
+
+# weex-toolkit
+
+[weex-toolkit](https://github.com/weexteam/weex-toolkit) is an official 
command line tool to help developers to create , debug and build their weex 
project.
+
+### Install
+use npm to install weex-toolkit:
+
+``` bash
+$ npm install -g weex-toolkit
+```
+if you make it, you can input "weex" in your command line terminal to test 
it. The right output:
+
+
+![weex-commands](https://img.alicdn.com/tfs/TB1NBhdQXXXXXXzXFXXXXXXXXXX-712-343.png)
+
+if you have never installed node.js, you should go [node.js official site]( 
https://nodejs.org/en/) to download and install it. 
+* node engine version >= 6. You can try [n](https://github.com/tj/n) to manage 
your node versions*
+If you meet some errors when installing like “permission error”, please go 
[weex-toolkit issues](https://github.com/weexteam/weex-toolkit/issues) to find 
some solution or have a discuss with us. 
+
+
+### initialize weex project
+```bash
+$ weex init awesome-project
+```
+After command running, you can find `awesome-project` directory and there are 
some weex templates in it. 
+There are some useful npm scripts you will use in the future:
+
+- `build`: build the source code and generate the JS bundle
+- `dev`: run webpack watch configuration
+- `serve`: start a web server
+- `debug`: open the debug mode
+
+When all dependences are ready, you can input `npm run dev` and run `npm run 
server` in a command line tab. Now you can visit our web page in :
+
+http://localhost:8080/index.html
+
+
+### preview weex page in time
+
+weex-toolkit supports previewing your weex file(.we or .vue) in a watch mode. 
You only need specify your file path:
+
+``` bash
+$ weex src/foo.vue 
+```
+The browser will auto open the location and you could see the layout and 
effects of your weex page. If you have a 
[playground](https://weex.apache.org/cn/playground.html) app in your mobile 
devices , you can scan the QR code at the opened page.
+Try the command below , you’ll preview the whole directory files.
+
+``` bash
+$ weex src --entry src/foo.vue
+```
+You need to specify the directory path and the entry file(--entry)
+### build weex project
+Use ` weex compile ` to build your single weex file or the whole project.
+``` bash
+weex compile src/foo.vue dist
+```
+There are two arguments. One is your code source path (a single file or a 
directory) and another is your destination path you want to build
+
+### debug 
+
+weex-toolkit has the ability to extend third party script.  And Weex devtools 
is a custom devtools for weex that implements [Chrome Debugging 
Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol), it is 
designed to help you quickly inspect your app and debug your JS bundle source 
in a chrome web page, both android and iOS platform are supported. So you can 
use weex-devtools feature by weex-toolkit.
+
+#### usage
+
+``` bash
+weex debug [options] [we_file|bundles_dir]
+
+  Options:
+
+    -h, --help           output usage information
+    -V, --verbose        display logs of debugger server
+    -v, --version        display version
+    -p, --port [port]    set debugger server port
+    -e, --entry [entry]  set the entry bundlejs path when you specific the 
bundle server root path
+    -m, --mode [mode]    set build mode [transformer|loader]
+    -w, --watch          watch we file changes auto build them and refresh 
debugger page![default enabled]
+```
+#### start debugger
+
+```
+$ weex debug
+```
+
+
+this command will start debug server and launch a chrome opening `DeviceList` 
page.
+this page will display a qrcode ,you can use `Playground App` scan it for 
starting debug.
+
+#### debug .we|.vue file
+
+```
+$ weex debug your_weex.vue
+```
+
+this command will compile `your_weex.we` to `your_weex.js`  and start the 
debug server as upon command.
+`your_weex.js` will deploy on the server and displayed in `DeviceList` page as 
 another qrcode contain the url of your_weex.js
+
+.
+#### start debugger with a directory of we files
+
+
+```
+$weex debug your/we/path  -e index.we
+```
+
+this command will build every file in your/we/path and deploy them on the 
bundle server. your directory will mapping to  http://localhost:port/weex/ 
+use -e to set the entry of these bundles. and the url of "index.we" will 
display on device list page as another qrcode.
+
+
+#### Features
+
+##### Connect devices
+
+![devtools-main](https://img.alicdn.com/tps/TB13fwSKFXXXXXDaXXXXXXXXXXX-887-828.png)
+
+##### Inspector
+
+ Inspector can be used to show your `Element` \ `Network` \ `Console log` \ 
`ScreenCast` \ `BoxModel` \ `Native View` and so on.
+
+![devtools-inspector](https://img.alicdn.com/tps/TB1O.nwKFXXXXX8XpXXXXXXXXXX-1436-811.png)
+##### Element
+
+![inspector-element](https://img.alicdn.com/tps/TB1.02bKFXXXXXwaXXXXXXXXXXX-2880-1800.png)
+##### NetWork
+##### show the total time and latency
+
+![inspector-network](https://img.alicdn.com/tps/TB1NjO_KFXXXXcaaXXXXXXXXXXX-2880-1800.png)
+##### show the header and response
+
+![inspector-network](https://img.alicdn.com/tps/TB1ck6lKFXXXXbZXFXXXXXXXXXX-2880-1800.png)
+##### Console
+
+![inspector-console](https://img.alicdn.com/tps/TB1a7HqKFXXXXXMXFXXXXXXXXXX-2880-1800.png)
+##### Resource
+
+![inspector-resource](https://img.alicdn.com/tps/TB1oY6cKFXXXXXQaXXXXXXXXXXX-2880-1800.png)
+#### Debugger
+
+![devtools-debugger](https://img.alicdn.com/tps/TB1aPTEKFXXXXXaXXXXXXXXXXXX-1436-813.png)
+##### Breakpoint and CallStack
+
+![debugger-breakpoint](https://img.alicdn.com/tps/TB1_trbKFXXXXc0XVXXXXXXXXXX-2880-1800.png)
+#### Integrate devtools
+* Android
+    * See the doc [Weex devtools 
(Android)](../../references/advanced/integrate-devtool-to-android.html), it 
will lead you to config and use it step by step.
+* IOS
+    * See the doc [Weex devtools 
(iOS)](../../references/advanced/integrate-devtool-to-ios.html), it will lead 
you to config and use it step by step.
+  
+### weex-toolkit extends weexpack command
+
+
+
+[Weexpack](https://github.com/weexteam/weex-pack) helps to setup weex 
application from scratch quickly. With simple commands, developers could create 
a Weex project, add different platform template, could install plugins from 
local, GitHub or Weex market, could pack up his application project and run on 
mobile. For those who would like to share his own plugins, he could publish 
them to the Weex market.
+
+Now weex-toolkit can run the same commands of weexpack because of the new 
architecture. If your directory is generated by weexpack, you can build your 
iOS or android app.
+
+### weex platform and run commands
+
+Use `platform add|remove` to add or remove Weex app template and run it in 
your target devices.
+
+``` bash
+$ weex platform add iOS 
+```
+If you use these commands firstly, you might see the prompt. Just enter Y.
+
+![install 
weexpack](https://gw.alicdn.com/tfs/TB19n4AQXXXXXawXVXXXXXXXXXX-577-70.png)
+
+Then run platform, you will see an iPhone simulator
+
+``` bash
+$ weex run ios
+```
+
+
+
+
+### weex plugin commands
+
+If you want to use some plugins on the [weex market] 
(https://market.weex-project.io/), weex-toolkit is the right choice.
+
+```bash
+$ weex plugin add plugin_name
+```
+You need to specify the plugin name from market like "weex-chart":
+
+``` bash
+$ weex plugin add weex-chart
+```
+
+Remove some plugins(eg:weex-chart):
+
+``` bash
+$ weex plugin remove weex-chart
+```
+
+Learn more about [weexpack](https://github.com/weexteam/weex-pack)
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/49f4d21d/doc/source/guide/tools/weexpack.md
----------------------------------------------------------------------
diff --git a/doc/source/guide/tools/weexpack.md 
b/doc/source/guide/tools/weexpack.md
deleted file mode 100644
index e3cfdbf..0000000
--- a/doc/source/guide/tools/weexpack.md
+++ /dev/null
@@ -1,300 +0,0 @@
----
-title: Using Weexpack
-type: guide
-order: 5.2
-version: 2.1
----
-
-# Using Weexpack
-
-## Weexpack introduction
-
-Weexpack is our next generation of engineering development kits, it helps to 
setup wWex application from scratch quickly. With simple commands, developers 
could create a Weex project, add different platform template, could install 
plugins from local, GitHub or Weex market, could pack up his application 
project and run on mobile. For those who would like to share his own plugins, 
he could publish them to the Weex market.
-
-weexpack commands can be grouped to three parts:
-* application package
- * **weexpack create** — create Weex project.
- * **weexpack platform add/remove** — add/remove Weex platform 
template,it support plugins and Weex bundle debugging by default.
- * **weexpack platform list** — query installed platforms and its version.
- * **weexpack platform run** - pack/build/run application.
-
-* plugin usuage
- * **weexpack plugin add/remove** — add/remove Weex plugin, support to 
install from local, Github or market.
- * **weexpack plugin list** — query installed plugins and its version.
-
-* plugin development
- * **weexpack plugin create** - create plugin template with necessary config 
file and directory.
- * **weexpack plugin publish** - publish plugin to market.
-
-
-## Installation
-### pre-environmental requirements
-
-- Supported on Mac linux windows.
-- Configure the [Node.js] [1] environment and install the [npm] [2] package 
manager.(need node 6.0+)
-- Configure iOS development environment:
-    - Install [Xcode IDE] [3] to launch Xcode once so that Xcode automatically 
installs the Developer Tools and confirms the usage protocol.
-    - Install cocoaPods
-- Configure the Android development environment:
-    - Install [Android Studio] [4] and open the new project. Open the menu 
bar, open the [AVD Manager] [5], the new Android emulator and start. (If you 
have installed [Docker] [6], close the Docker Server.)
-    - Or just download the [Android SDK] [7], run the command line [AVD 
Manager] [8], create a new Android emulator and launch it.
-    - Make sure that Android build-tool version is 23.0.2
-
-### Instructions
-
-First, install the weex-pack command globally:
-
-```bash
-$ npm install -g weexpack
-```
-
-or run the following command under the root path of your cloned weexpack repo
-
-```bash
-$ npm install
-```
-
-## Pack application (and plugin usuage)
-
-Following graph shows how to pack a application, plugin related parts werenot 
a must.
-
-![weexpack1](https://img.alicdn.com/tps/TB1.bpVPXXXXXarapXXXXXXXXXX-462-310.png)
-
-### Steps in detail
-
-#### 1. create a weexpack project
-
-```bash
-$ weexpack create appName
-```
-
-will create directory as follows:
-
-```
-WeexProject
-├── README.md
-├── android.config.json
-├── config.xml
-├── hooks
-│   └── README.md
-├── ios.config.json
-├── package.json
-├── platforms     // platform template directory
-├── plugins       // plugins download to here
-│   └── README.md
-├── src           // application(we/vue file)directory
-│   └── index.we
-├── start
-├── start.bat
-├── tools
-│   └── webpack.config.plugin.js
-├── web
-│   ├── index.html
-│   ├── index.js
-│   └── js
-│       └── init.js
-└── webpack.config.js
-```
-
-Above project template has no ios/android directory by default, you should 
change to appName path to install necessary dependency.
-
-```bash
-$ cd appName && npm install
-```
-
-#### 2. install Weex application template
-
-Application template by default support Weex plugins and Weex bundle 
debugging. Please note template name are in lower-case, template was installed 
under platforms directory.
-
-* android template
-
-```bash
-$ weexpack platform add android
-```
-
-* ios template
-
-```bash
-$ weexpack platform add ios
-```
-
-Take android platform as example,the directory under platforms looks as 
following:
-
-```
-platforms
-└── android
-    ├── LICENSE
-    ├── NOTICE
-    ├── README.md
-    ├── app
-    │   ├── build
-    │   ├── build.gradle
-    │   ├── proguard-rules.pro
-    │   └── src
-    ├── appframework
-    │   ├── build
-    │   ├── build.gradle
-    │   ├── proguard-rules.pro
-    │   └── src
-    ├── build
-    │   └── generated
-    ├── build.gradle
-    ├── codeStyleSettings.xml
-    ├── gradle
-    │   └── wrapper
-    ├── gradle.properties
-    ├── gradlew
-    ├── gradlew.bat
-    ├── settings.gradle
-    └── weexplugin
-        ├── build.gradle
-        ├── proguard-rules.pro
-        └── src
-
-```
-
-* query installed platforms
-
-  ```bash
-  $ weexpack platform list
-  ```
-
-  you will get result like:
-
-  ```
-  Installed platforms:
-    android
-  Available platforms:
-    android ^6.2.1
-  ```
-
-* remove platform template
-
-  Please use remove command to remove unnecessary platform, for example user 
want to remove ios template in windows platform.
-
-  ```bash
-  $ weexpack platform remove ios
-  ```
-
-#### 3. install Weex plugin(optional)
-
-* add plugins from local
-
-  ```bash
-  $ weexpack plugin add path/to/plugin
-  ```
-
-* add plugins from Weex market,for example weex-chart
-
-  ```bash
-  $ weexpack plugin add weex-chart
-  ```
-
-  weexplugin directory was the target directory where plugin was installed. 
Take android as an example:
-
-  ```
-    weexplugin
-    ├── build.gradle  //  plugin build script, maintained by weexpack 
tool
-    ├── libs
-    ├── proguard-rules.pro
-    ├── src
-    │   └── main
-    │       ├── AndroidManifest.xml // plugin android manifest file
-    │       ├── java
-    │       │   ├── // 插件src安装目录
-    │       │   └── com
-    │       │       └── alibaba
-    │       │           └── weex
-    │       │               └── plugin
-    │       │                   ├── ConfigXmlParser.java // config 
file parser
-    │       │                   ├── PluginConfig.java    // external 
interface
-    │       │                   ├── PluginEntry.java     // plugin 
description
-    │       │                   └── PluginManager.java   // plugin 
manager
-    │       └── res // plugin resource path
-    │           ├── drawable
-    │           ├── values
-    │           │   └── strings.xml
-    │           └── xml
-    │               └── config.xml // plugin config file, which used 
by PluginManager when install
-  ```
-
-* query installed plugins
-
-  ```bash
-  $ weexpack plugin list
-  ```
-
-* remove installed plugin,for example weex-chart
-
-  ```bash
-  $ weexpack plugin remove weex-chart
-  ```
-
-#### 4. pack application and run
-
-After all above steps, you could modify your application we/vue files under 
src directory. And then, use run command to pack and run your application. Run 
command will download building tools and all dependencies which may take a 
while, and open monitor or connect to mobile device to execute your application 
afterwards.
-
-* for android application
-
-  ```bash
-  $ weexpack run android
-  ```
-
-  You could modify your project information in android.config.json file:
-
-  - AppName: the name of the project
-  - AppId: application_id the name of the package
-  - SplashText: the text in welcome page
-  - WeexBundle: the bundle file (could be local file or remote url). For Local 
file please put your we/vue files under the src directory
-
-* for ios platform
-
-  * simulator
-
-    ```bash
-    $ weexpack run ios
-    ```
-
-  * Build ipa
-
-    ```bash
-    $ weexpack build ios
-    ```
-
-  this command will prompt for CodeSign, Profile(provisioning profile), AppId 
to build ipa. Other information like AppName, Weex bundle could be configured 
as you like in the file ios.config.json. After this command, ipa file could be 
created under the directory  `/playground/build/ipa_build/`.
-
-  Note: For details about various requirements to deploy to a device, refer to 
the Launch Your App On Devices section of Apple's [About App Distribution 
Workflows][9]. Briefly, you need to do the following before deploying:
-
-  1. CodeSign should be installed to keychain, click keychain to get the id;
-  2. provisioning profile need UUID. you could use the file 
mobileprovision_UUID.sh to generate UUID as follows:
-
-    ```
-    $ ./mobileprovision_UUID.sh abcpath
-    ```
-    abcpath is the path of provisioning profile file.
-
-* for Web platform
-
-  ```bash
-  $ weexpack run web
-  ```
-
-## Plugin development and publishment
-
-![weexpack2](https://img.alicdn.com/tps/TB18hxjPXXXXXXgapXXXXXXXXXX-248-258.png)
-
-[Plugin development 
guide](https://github.com/weexteam/weex-pack/blob/master/doc/plugin-devloping-web.md)
-
-## Examples
-
- [Create Weex One App with 
Weexpack](https://github.com/weexteam/weex-pack/wiki/Create-Weex-One-App-with-Weexpack)
-
-  [1]: https://nodejs.org/
-  [2]: https://www.npmjs.com/
-  [3]: https://itunes.apple.com/us/app/xcode/id497799835?mt=12
-  [4]: https://developer.android.com/studio/install.html
-  [5]: https://developer.android.com/studio/run/managing-avds.html
-  [6]: https://www.docker.com/
-  [7]: https://developer.android.com/studio/releases/sdk-tools.html
-  [8]: https://developer.android.com/studio/run/managing-avds.html
-  [9]: 
https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html

Reply via email to