You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by cx...@apache.org on 2017/03/27 07:42:15 UTC

[09/18] incubator-weex git commit: Merge branch 'v0.10.0-playground' into 0.11-dev

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/components/slider.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/components/slider.js b/android/playground/app/src/main/assets/vue/components/slider.js
new file mode 100644
index 0000000..c67c482
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/components/slider.js
@@ -0,0 +1,898 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(434)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(435)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(444)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/components/slider.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 383:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(384)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(385)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(386)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/panel.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 384:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "panel": {
+	    "marginBottom": 20,
+	    "backgroundColor": "#ffffff",
+	    "borderColor": "#dddddd",
+	    "borderWidth": 1
+	  },
+	  "panel-primary": {
+	    "borderColor": "rgb(40,96,144)"
+	  },
+	  "panel-success": {
+	    "borderColor": "rgb(76,174,76)"
+	  },
+	  "panel-info": {
+	    "borderColor": "rgb(70,184,218)"
+	  },
+	  "panel-warning": {
+	    "borderColor": "rgb(238,162,54)"
+	  },
+	  "panel-danger": {
+	    "borderColor": "rgb(212,63,58)"
+	  },
+	  "panel-header": {
+	    "backgroundColor": "#f5f5f5",
+	    "fontSize": 40,
+	    "color": "#333333"
+	  },
+	  "panel-header-primary": {
+	    "backgroundColor": "rgb(40,96,144)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-success": {
+	    "backgroundColor": "rgb(92,184,92)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-info": {
+	    "backgroundColor": "rgb(91,192,222)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-warning": {
+	    "backgroundColor": "rgb(240,173,78)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-danger": {
+	    "backgroundColor": "rgb(217,83,79)",
+	    "color": "#ffffff"
+	  }
+	}
+
+/***/ },
+
+/***/ 385:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'default' },
+	    title: { default: '' },
+	    paddingBody: { default: 20 },
+	    paddingHead: { default: 20 },
+	    dataClass: { default: '' }, // FIXME transfer class
+	    border: { default: 0 }
+	  }
+	};
+
+/***/ },
+
+/***/ 386:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['panel', 'panel-' + _vm.type],
+	    style: {
+	      borderWidth: _vm.border
+	    }
+	  }, [_h('text', {
+	    class: ['panel-header', 'panel-header-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingHead,
+	      paddingBottom: _vm.paddingHead,
+	      paddingLeft: _vm.paddingHead * 1.5,
+	      paddingRight: _vm.paddingHead * 1.5
+	    }
+	  }, [_vm._s(_vm.title)]), _h('div', {
+	    class: ['panel-body', 'panel-body-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingBody,
+	      paddingBottom: _vm.paddingBody,
+	      paddingLeft: _vm.paddingBody * 1.5,
+	      paddingRight: _vm.paddingBody * 1.5
+	    }
+	  }, [_vm._t("default")])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 434:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "body": {
+	    "backgroundColor": "#ffffff"
+	  },
+	  "slider": {
+	    "flexDirection": "row",
+	    "width": 690,
+	    "height": 360
+	  },
+	  "indicator": {
+	    "position": "absolute",
+	    "width": 690,
+	    "height": 420,
+	    "top": 140,
+	    "left": 240,
+	    "itemColor": "#dddddd",
+	    "itemSelectedColor": "rgb(40, 96, 144)"
+	  }
+	}
+
+/***/ },
+
+/***/ 435:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	var img0 = '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg';
+	var img1 = '//gw.alicdn.com/tps/i1/TB1M3sQMpXXXXakXXXXApNeJVXX-360-360.png';
+	module.exports = {
+	  data: function data() {
+	    return {
+	      eventCnt: 0,
+	      togglePlayMsg: 'pause',
+	      sliders: [{
+	        interval: 1000,
+	        autoPlay: true,
+	        sliderPages: [{
+	          items: [{
+	            image: img0,
+	            link: '//h5.m.taobao.com/1'
+	          }, {
+	            image: img0,
+	            link: '//h5.m.taobao.com/1'
+	          }]
+	        }, {
+	          items: [{
+	            image: img1,
+	            link: '//h5.m.taobao.com/1'
+	          }, {
+	            image: img1,
+	            link: '//h5.m.taobao.com/1'
+	          }]
+	        }, {
+	          items: [{
+	            image: img0,
+	            link: '//h5.m.taobao.com/1'
+	          }, {
+	            image: img1,
+	            link: '//h5.m.taobao.com/1'
+	          }]
+	        }]
+	      }, {
+	        interval: 3000,
+	        autoPlay: true,
+	        sliderPages: [{
+	          items: [{
+	            image: img0,
+	            link: '//h5.m.taobao.com/1'
+	          }, {
+	            image: img0,
+	            link: '//h5.m.taobao.com/1'
+	          }]
+	        }, {
+	          items: [{
+	            image: img1,
+	            link: '//h5.m.taobao.com/1'
+	          }, {
+	            image: img1,
+	            link: '//h5.m.taobao.com/1'
+	          }]
+	        }, {
+	          items: [{
+	            image: img0,
+	            link: '//h5.m.taobao.com/1'
+	          }, {
+	            image: img1,
+	            link: '//h5.m.taobao.com/1'
+	          }]
+	        }]
+	      }, {
+	        interval: 5000,
+	        autoPlay: true,
+	        sliderPages: [{
+	          items: [{
+	            image: img0,
+	            link: '//h5.m.taobao.com/1'
+	          }, {
+	            image: img0,
+	            link: '//h5.m.taobao.com/1'
+	          }]
+	        }, {
+	          items: [{
+	            image: img1,
+	            link: '//h5.m.taobao.com/1'
+	          }, {
+	            image: img1,
+	            link: '//h5.m.taobao.com/1'
+	          }]
+	        }, {
+	          items: [{
+	            image: img0,
+	            link: '//h5.m.taobao.com/1'
+	          }, {
+	            image: img1,
+	            link: '//h5.m.taobao.com/1'
+	          }]
+	        }]
+	      }]
+	    };
+	  },
+	  components: {
+	    panel: __webpack_require__(383),
+	    sliderPage: __webpack_require__(436)
+	  },
+	  methods: {
+	    togglePlay: function togglePlay() {
+	      var autoPlay = this.sliders[0].autoPlay;
+	      autoPlay = !autoPlay;
+	      this.sliders[0].autoPlay = autoPlay;
+	      this.togglePlayMsg = autoPlay ? 'pause' : 'play';
+	    },
+	    handleSliderChange: function handleSliderChange() {
+	      var nowCnt = this.eventCnt + 1;
+	      this.eventCnt = nowCnt;
+	    },
+	    setInterval1: function setInterval1() {
+	      this.sliders[0].interval = 1000;
+	    },
+	    setInterval3: function setInterval3() {
+	      this.sliders[0].interval = 3000;
+	    },
+	    setInterval5: function setInterval5() {
+	      this.sliders[0].interval = 5000;
+	    }
+	  }
+	};
+
+/***/ },
+
+/***/ 436:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(437)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(438)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(443)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/slider-page.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 437:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "slider-page": {
+	    "flexDirection": "row",
+	    "justifyContent": "space-between",
+	    "width": 714,
+	    "height": 420
+	  }
+	}
+
+/***/ },
+
+/***/ 438:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    items: { default: [] }
+	  },
+	  components: {
+	    sliderItem: __webpack_require__(439)
+	  }
+	};
+
+/***/ },
+
+/***/ 439:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(440)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(441)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(442)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/slider-item.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 440:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "slider-item": {
+	    "width": 348,
+	    "height": 400
+	  }
+	}
+
+/***/ },
+
+/***/ 441:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    image: { default: '' },
+	    link: { default: '' }
+	  }
+	};
+
+/***/ },
+
+/***/ 442:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('image', {
+	    staticClass: ["slider-item"],
+	    attrs: {
+	      "src": _vm.image
+	    }
+	  })
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 443:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    staticClass: ["slider-page"]
+	  }, [_vm._l((_vm.items), function(v) {
+	    return _h('slider-item', {
+	      attrs: {
+	        "image": v.image,
+	        "link": v.link
+	      }
+	    })
+	  })])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 444:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('scroller', {
+	    staticClass: ["body"]
+	  }, [_h('panel', {
+	    attrs: {
+	      "title": "auto-play",
+	      "type": "primary"
+	    }
+	  }, [_h('panel', {
+	    attrs: {
+	      "title": "auto-play = false",
+	      "padding-body": "0"
+	    }
+	  }, [_h('slider', {
+	    staticClass: ["slider"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree",
+	      "interval": _vm.sliders[1].interval,
+	      "autoPlay": "false"
+	    }
+	  }, [_h('indicator', {
+	    staticClass: ["indicator"]
+	  }), _vm._l((_vm.sliders[1].sliderPages), function(v) {
+	    return _h('slider-page', {
+	      attrs: {
+	        "items": v.items
+	      }
+	    })
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "auto-play = true",
+	      "padding-body": "0"
+	    }
+	  }, [_h('slider', {
+	    staticClass: ["slider"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree",
+	      "interval": _vm.sliders[0].interval,
+	      "autoPlay": _vm.sliders[0].autoPlay
+	    }
+	  }, [_h('indicator', {
+	    staticClass: ["indicator"]
+	  }), _vm._l((_vm.sliders[0].sliderPages), function(v) {
+	    return _h('slider-page', {
+	      attrs: {
+	        "items": v.items
+	      }
+	    })
+	  })])])]), _h('panel', {
+	    attrs: {
+	      "title": 'Event, ' + _vm.eventCnt + ' change',
+	      "type": "primary"
+	    }
+	  }, [_h('slider', {
+	    staticClass: ["slider"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree",
+	      "interval": _vm.sliders[0].interval,
+	      "autoPlay": _vm.sliders[0].autoPlay
+	    },
+	    on: {
+	      "change": _vm.handleSliderChange
+	    }
+	  }, [_h('indicator', {
+	    staticClass: ["indicator"]
+	  }), _vm._l((_vm.sliders[0].sliderPages), function(v) {
+	    return _h('slider-page', {
+	      attrs: {
+	        "items": v.items
+	      }
+	    })
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "Indicator",
+	      "type": "primary"
+	    }
+	  }, [_h('panel', {
+	    attrs: {
+	      "title": "default style",
+	      "padding-body": "0"
+	    }
+	  }, [_h('slider', {
+	    staticClass: ["slider"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree",
+	      "interval": _vm.sliders[0].interval,
+	      "autoPlay": _vm.sliders[0].autoPlay
+	    },
+	    on: {
+	      "change": _vm.handleSliderChange
+	    }
+	  }, [_h('indicator', {
+	    staticClass: ["indicator"]
+	  }), _vm._l((_vm.sliders[0].sliderPages), function(v) {
+	    return _h('slider-page', {
+	      attrs: {
+	        "items": v.items
+	      }
+	    })
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "width & height",
+	      "padding-body": "0"
+	    }
+	  }, [_h('slider', {
+	    staticClass: ["slider"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree",
+	      "interval": _vm.sliders[0].interval,
+	      "autoPlay": _vm.sliders[0].autoPlay
+	    }
+	  }, [_h('indicator', {
+	    staticStyle: {
+	      itemColor: "#dddddd",
+	      width: "714",
+	      height: "460"
+	    }
+	  }), _vm._l((_vm.sliders[0].sliderPages), function(v) {
+	    return _h('slider-page', {
+	      attrs: {
+	        "items": v.items
+	      }
+	    })
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "left & top",
+	      "padding-body": "0"
+	    }
+	  }, [_h('slider', {
+	    staticClass: ["slider"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree",
+	      "interval": _vm.sliders[1].interval,
+	      "autoPlay": _vm.sliders[1].autoPlay
+	    }
+	  }, [_h('indicator', {
+	    staticClass: ["indicator"],
+	    staticStyle: {
+	      top: "-140",
+	      left: "-240"
+	    }
+	  }), _vm._l((_vm.sliders[1].sliderPages), function(v) {
+	    return _h('slider-page', {
+	      attrs: {
+	        "items": v.items
+	      }
+	    })
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "itemColor & itemSelectedColor",
+	      "padding-body": "0"
+	    }
+	  }, [_h('slider', {
+	    staticClass: ["slider"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree",
+	      "interval": _vm.sliders[2].interval,
+	      "autoPlay": _vm.sliders[2].autoPlay
+	    }
+	  }, [_h('indicator', {
+	    staticClass: ["indicator"],
+	    staticStyle: {
+	      itemSelectedColor: "rgb(217, 83, 79)"
+	    }
+	  }), _vm._l((_vm.sliders[2].sliderPages), function(v) {
+	    return _h('slider-page', {
+	      attrs: {
+	        "items": v.items
+	      }
+	    })
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "itemSize",
+	      "padding-body": "0"
+	    }
+	  }, [_h('slider', {
+	    staticClass: ["slider"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree",
+	      "interval": _vm.sliders[1].interval,
+	      "autoPlay": _vm.sliders[1].autoPlay
+	    }
+	  }, [_h('indicator', {
+	    staticStyle: {
+	      itemColor: "#dddddd",
+	      itemSize: "40",
+	      top: "140",
+	      left: "180",
+	      width: "700",
+	      height: "380"
+	    }
+	  }), _vm._l((_vm.sliders[1].sliderPages), function(v) {
+	    return _h('slider-page', {
+	      attrs: {
+	        "items": v.items
+	      }
+	    })
+	  })])])])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/components/tabbar.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/components/tabbar.js b/android/playground/app/src/main/assets/vue/components/tabbar.js
new file mode 100644
index 0000000..85d581a
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/components/tabbar.js
@@ -0,0 +1,599 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* script */
+	__vue_exports__ = __webpack_require__(445)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(454)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/components/tabbar.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 421:
+/***/ function(module, exports) {
+
+	exports.getBaseURL = function (vm) {
+	  var bundleUrl = vm.$getConfig().bundleUrl;
+	  var nativeBase;
+	  var isAndroidAssets = bundleUrl.indexOf('your_current_IP') >= 0 || bundleUrl.indexOf('file://assets/')>=0;
+	  var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
+	  if (isAndroidAssets) {
+	    nativeBase = 'file://assets/';
+	  }
+	  else if (isiOSAssets) {
+	    // file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/
+	    // file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/
+	    nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
+	  }
+	  else {
+	    var host = 'localhost:12580';
+	    var matches = /\/\/([^\/]+?)\//.exec(vm.$getConfig().bundleUrl);
+	    if (matches && matches.length >= 2) {
+	      host = matches[1];
+	    }
+	    nativeBase = 'http://' + host + '/' + vm.dir + '/build/';
+	  }
+	  var h5Base = './index.html?page=./' + vm.dir + '/build/';
+	  // in Native
+	  var base = nativeBase;
+	  if (typeof window === 'object') {
+	    // in Browser or WebView
+	    base = h5Base;
+	  }
+	  return base
+	}
+
+
+/***/ },
+
+/***/ 445:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+
+	var getBaseURL = __webpack_require__(421).getBaseURL;
+	module.exports = {
+	  data: function data() {
+	    return {
+	      dir: 'examples',
+	      tabItems: [{
+	        index: 0,
+	        title: 'tab1',
+	        titleColor: '#000000',
+	        icon: '',
+	        image: 'http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png',
+	        selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png',
+	        src: 'component/tabbar/tabbar-item.js?itemId=tab1',
+	        visibility: 'visible'
+	      }, {
+	        index: 1,
+	        title: 'tab2',
+	        titleColor: '#000000',
+	        icon: '',
+	        image: 'http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png',
+	        selectedImage: 'http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png',
+	        src: 'component/tabbar/tabbar-item.js?itemId=tab2',
+	        visibility: 'hidden'
+	      }, {
+	        index: 2,
+	        title: 'tab3',
+	        titleColor: '#000000',
+	        icon: '',
+	        image: 'http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png',
+	        selectedImage: 'http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png',
+	        src: 'component/tabbar/tabbar-item.js?itemId=tab3',
+	        visibility: 'hidden'
+	      }]
+	    };
+	  },
+	  components: {
+	    tabbar: __webpack_require__(446)
+	  },
+	  created: function created() {
+	    var baseURL = getBaseURL(this);
+	    for (var i = 0; i < this.tabItems.length; i++) {
+	      var tabItem = this.tabItems[i];
+	      tabItem.src = baseURL + tabItem.src;
+	    }
+	  },
+	  methods: {
+	    tabBarOnClick: function tabBarOnClick(e) {
+	      console.log('tabBarOnClick', e.index);
+	    }
+	  }
+	};
+
+/***/ },
+
+/***/ 446:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(447)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(448)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(453)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/tabbar.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 447:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "wrapper": {
+	    "width": 750,
+	    "position": "absolute",
+	    "top": 0,
+	    "left": 0,
+	    "right": 0,
+	    "bottom": 0
+	  },
+	  "content": {
+	    "position": "absolute",
+	    "top": 0,
+	    "left": 0,
+	    "right": 0,
+	    "bottom": 0,
+	    "marginTop": 0,
+	    "marginBottom": 88
+	  },
+	  "tabbar": {
+	    "flexDirection": "row",
+	    "position": "fixed",
+	    "bottom": 0,
+	    "left": 0,
+	    "right": 0,
+	    "height": 88
+	  }
+	}
+
+/***/ },
+
+/***/ 448:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    tabItems: { default: [] },
+	    selectedColor: { default: '#ff0000' },
+	    unselectedColor: { default: '#000000' }
+	  },
+	  data: function data() {
+	    return {
+	      selectedIndex: 0
+	    };
+	  },
+	  components: {
+	    tabitem: __webpack_require__(449)
+	  },
+	  created: function created() {
+	    this.select(this.selectedIndex);
+	  },
+	  methods: {
+	    tabItemOnClick: function tabItemOnClick(e) {
+	      this.selectedIndex = e.index;
+	      this.select(e.index);
+	      this.$emit('tabBarOnClick', e);
+	    },
+	    select: function select(index) {
+	      for (var i = 0; i < this.tabItems.length; i++) {
+	        var tabItem = this.tabItems[i];
+	        if (i == index) {
+	          tabItem.icon = tabItem.selectedImage;
+	          tabItem.titleColor = this.selectedColor;
+	          tabItem.visibility = 'visible';
+	        } else {
+	          tabItem.icon = tabItem.image;
+	          tabItem.titleColor = this.unselectedColor;
+	          tabItem.visibility = 'hidden';
+	        }
+	      }
+	    }
+	  }
+	};
+
+/***/ },
+
+/***/ 449:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(450)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(451)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(452)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/tabitem.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 450:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "container": {
+	    "flex": 1,
+	    "flexDirection": "column",
+	    "alignItems": "center",
+	    "justifyContent": "center",
+	    "height": 88
+	  },
+	  "top-line": {
+	    "position": "absolute",
+	    "top": 0,
+	    "left": 0,
+	    "right": 0,
+	    "height": 2
+	  },
+	  "tab-icon": {
+	    "marginTop": 5,
+	    "width": 40,
+	    "height": 40
+	  },
+	  "tab-text": {
+	    "marginTop": 5,
+	    "textAlign": "center",
+	    "fontSize": 20
+	  }
+	}
+
+/***/ },
+
+/***/ 451:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    index: { default: 0 },
+	    title: { default: '' },
+	    titleColor: { default: '#000000' },
+	    icon: { default: '' },
+	    backgroundColor: { default: '#ffffff' }
+	  },
+	  methods: {
+	    onclickitem: function onclickitem(e) {
+	      var params = {
+	        index: this.index
+	      };
+	      this.$emit('tabItemOnClick', params);
+	    }
+	  }
+	};
+
+/***/ },
+
+/***/ 452:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    staticClass: ["container"],
+	    style: {
+	      backgroundColor: _vm.backgroundColor
+	    },
+	    on: {
+	      "click": _vm.onclickitem
+	    }
+	  }, [_h('image', {
+	    staticClass: ["top-line"],
+	    attrs: {
+	      "src": "http://gtms03.alicdn.com/tps/i3/TB1mdsiMpXXXXXpXXXXNw4JIXXX-640-4.png"
+	    }
+	  }), _h('image', {
+	    staticClass: ["tab-icon"],
+	    attrs: {
+	      "src": _vm.icon
+	    }
+	  }), _h('text', {
+	    staticClass: ["tab-text"],
+	    style: {
+	      color: _vm.titleColor
+	    }
+	  }, [_vm._s(_vm.title)])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 453:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    staticClass: ["wrapper"]
+	  }, [_vm._l((_vm.tabItems), function(item) {
+	    return _h('embed', {
+	      staticClass: ["content"],
+	      style: {
+	        visibility: item.visibility
+	      },
+	      attrs: {
+	        "src": item.src,
+	        "type": "weex"
+	      }
+	    })
+	  }), _h('div', {
+	    staticClass: ["tabbar"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree"
+	    }
+	  }, [_vm._l((_vm.tabItems), function(item) {
+	    return _h('tabitem', {
+	      attrs: {
+	        "index": item.index,
+	        "icon": item.icon,
+	        "title": item.title,
+	        "titleColor": item.titleColor
+	      },
+	      on: {
+	        "tabItemOnClick": _vm.tabItemOnClick
+	      }
+	    })
+	  })])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 454:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    staticStyle: {
+	      flexDirection: "column"
+	    }
+	  }, [_h('tabbar', {
+	    attrs: {
+	      "tabItems": _vm.tabItems
+	    },
+	    on: {
+	      "tabBarOnClick": _vm.tabBarOnClick
+	    }
+	  })])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/components/text.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/components/text.js b/android/playground/app/src/main/assets/vue/components/text.js
new file mode 100644
index 0000000..4b3ff9a
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/components/text.js
@@ -0,0 +1,513 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(455)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(456)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(457)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/components/text.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 383:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(384)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(385)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(386)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/panel.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 384:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "panel": {
+	    "marginBottom": 20,
+	    "backgroundColor": "#ffffff",
+	    "borderColor": "#dddddd",
+	    "borderWidth": 1
+	  },
+	  "panel-primary": {
+	    "borderColor": "rgb(40,96,144)"
+	  },
+	  "panel-success": {
+	    "borderColor": "rgb(76,174,76)"
+	  },
+	  "panel-info": {
+	    "borderColor": "rgb(70,184,218)"
+	  },
+	  "panel-warning": {
+	    "borderColor": "rgb(238,162,54)"
+	  },
+	  "panel-danger": {
+	    "borderColor": "rgb(212,63,58)"
+	  },
+	  "panel-header": {
+	    "backgroundColor": "#f5f5f5",
+	    "fontSize": 40,
+	    "color": "#333333"
+	  },
+	  "panel-header-primary": {
+	    "backgroundColor": "rgb(40,96,144)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-success": {
+	    "backgroundColor": "rgb(92,184,92)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-info": {
+	    "backgroundColor": "rgb(91,192,222)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-warning": {
+	    "backgroundColor": "rgb(240,173,78)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-danger": {
+	    "backgroundColor": "rgb(217,83,79)",
+	    "color": "#ffffff"
+	  }
+	}
+
+/***/ },
+
+/***/ 385:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'default' },
+	    title: { default: '' },
+	    paddingBody: { default: 20 },
+	    paddingHead: { default: 20 },
+	    dataClass: { default: '' }, // FIXME transfer class
+	    border: { default: 0 }
+	  }
+	};
+
+/***/ },
+
+/***/ 386:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['panel', 'panel-' + _vm.type],
+	    style: {
+	      borderWidth: _vm.border
+	    }
+	  }, [_h('text', {
+	    class: ['panel-header', 'panel-header-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingHead,
+	      paddingBottom: _vm.paddingHead,
+	      paddingLeft: _vm.paddingHead * 1.5,
+	      paddingRight: _vm.paddingHead * 1.5
+	    }
+	  }, [_vm._s(_vm.title)]), _h('div', {
+	    class: ['panel-body', 'panel-body-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingBody,
+	      paddingBottom: _vm.paddingBody,
+	      paddingLeft: _vm.paddingBody * 1.5,
+	      paddingRight: _vm.paddingBody * 1.5
+	    }
+	  }, [_vm._t("default")])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 455:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "txt": {
+	    "marginBottom": 12,
+	    "fontSize": 40
+	  }
+	}
+
+/***/ },
+
+/***/ 456:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  components: {
+	    panel: __webpack_require__(383)
+	  }
+	};
+
+/***/ },
+
+/***/ 457:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('scroller', [_h('panel', {
+	    attrs: {
+	      "title": "color",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["txt"]
+	  }, ["default is black"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      color: "#286090"
+	    }
+	  }, ["#286090"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      color: "#0f0"
+	    }
+	  }, ["#0f0"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      color: "red"
+	    }
+	  }, ["keyword"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      color: "rgb(238, 162, 54)"
+	    }
+	  }, ["rgb(238, 162, 54)"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      color: "rgba(238, 162, 54, 0.5)"
+	    }
+	  }, ["rgba(238, 162, 54, 0.5)"])]), _h('panel', {
+	    attrs: {
+	      "title": "font-size",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      fontSize: "32px"
+	    }
+	  }, ["32"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      fontSize: "64px"
+	    }
+	  }, ["64"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      fontSize: "100px"
+	    }
+	  }, ["100"])]), _h('panel', {
+	    attrs: {
+	      "title": "font-style",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      fontStyle: "normal"
+	    }
+	  }, ["normal"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      fontStyle: "italic"
+	    }
+	  }, ["italic"])]), _h('panel', {
+	    attrs: {
+	      "title": "font-weight",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      fontWeight: "normal"
+	    }
+	  }, ["normal"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      fontWeight: "bold"
+	    }
+	  }, ["bold"])]), _h('panel', {
+	    attrs: {
+	      "title": "text-decoration",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      textDecoration: "none"
+	    }
+	  }, ["none"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      textDecoration: "underline"
+	    }
+	  }, ["underline"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      textDecoration: "line-through"
+	    }
+	  }, ["line-through"])]), _h('panel', {
+	    attrs: {
+	      "title": "text-align",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      textAlign: "left"
+	    }
+	  }, ["left"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      textAlign: "center"
+	    }
+	  }, ["center"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      textAlign: "right"
+	    }
+	  }, ["right"])]), _h('panel', {
+	    attrs: {
+	      "title": "text-overflow",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      lines: "1"
+	    }
+	  }, ["no text-overflow, no text-overflow"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      textOverflow: "clip",
+	      width: "450px",
+	      lines: "1"
+	    }
+	  }, ["text-overflow: clip, text-overflow: clip"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      textOverflow: "ellipsis",
+	      width: "450px",
+	      lines: "1"
+	    }
+	  }, ["text-overflow: ellipsis, text-overflow: ellipsis"])]), _h('panel', {
+	    attrs: {
+	      "title": "line-height",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["txt"]
+	  }, ["no lineheight setting"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      lineHeight: "50"
+	    }
+	  }, ["lineheight 50"]), _h('text', {
+	    staticClass: ["txt"],
+	    staticStyle: {
+	      lineHeight: "80"
+	    }
+	  }, [" lineheight 80"])])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/components/video.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/components/video.js b/android/playground/app/src/main/assets/vue/components/video.js
new file mode 100644
index 0000000..17b1165
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/components/video.js
@@ -0,0 +1,396 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(458)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(459)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(460)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/components/video.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 387:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(388)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(389)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(390)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/button.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 388:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "btn": {
+	    "marginBottom": 0,
+	    "alignItems": "center",
+	    "justifyContent": "center",
+	    "borderWidth": 1,
+	    "borderStyle": "solid",
+	    "borderColor": "#333333"
+	  },
+	  "btn-default": {
+	    "color": "rgb(51,51,51)"
+	  },
+	  "btn-primary": {
+	    "backgroundColor": "rgb(40,96,144)",
+	    "borderColor": "rgb(40,96,144)"
+	  },
+	  "btn-success": {
+	    "backgroundColor": "rgb(92,184,92)",
+	    "borderColor": "rgb(76,174,76)"
+	  },
+	  "btn-info": {
+	    "backgroundColor": "rgb(91,192,222)",
+	    "borderColor": "rgb(70,184,218)"
+	  },
+	  "btn-warning": {
+	    "backgroundColor": "rgb(240,173,78)",
+	    "borderColor": "rgb(238,162,54)"
+	  },
+	  "btn-danger": {
+	    "backgroundColor": "rgb(217,83,79)",
+	    "borderColor": "rgb(212,63,58)"
+	  },
+	  "btn-link": {
+	    "borderColor": "rgba(0,0,0,0)",
+	    "borderRadius": 0
+	  },
+	  "btn-txt-default": {
+	    "color": "rgb(51,51,51)"
+	  },
+	  "btn-txt-primary": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-success": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-info": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-warning": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-danger": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-link": {
+	    "color": "rgb(51,122,183)"
+	  },
+	  "btn-sz-large": {
+	    "width": 300,
+	    "height": 100,
+	    "paddingTop": 25,
+	    "paddingBottom": 25,
+	    "paddingLeft": 40,
+	    "paddingRight": 40,
+	    "borderRadius": 15
+	  },
+	  "btn-sz-middle": {
+	    "width": 240,
+	    "height": 80,
+	    "paddingTop": 15,
+	    "paddingBottom": 15,
+	    "paddingLeft": 30,
+	    "paddingRight": 30,
+	    "borderRadius": 10
+	  },
+	  "btn-sz-small": {
+	    "width": 170,
+	    "height": 60,
+	    "paddingTop": 12,
+	    "paddingBottom": 12,
+	    "paddingLeft": 25,
+	    "paddingRight": 25,
+	    "borderRadius": 7
+	  },
+	  "btn-txt-sz-large": {
+	    "fontSize": 45
+	  },
+	  "btn-txt-sz-middle": {
+	    "fontSize": 35
+	  },
+	  "btn-txt-sz-small": {
+	    "fontSize": 30
+	  }
+	}
+
+/***/ },
+
+/***/ 389:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'default' },
+	    size: { default: 'large' },
+	    value: { default: '' }
+	  }
+	};
+
+/***/ },
+
+/***/ 390:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['btn', 'btn-' + _vm.type, 'btn-sz-' + _vm.size]
+	  }, [_h('text', {
+	    class: ['btn-txt', 'btn-txt-' + _vm.type, 'btn-txt-sz-' + _vm.size]
+	  }, [_vm._s(_vm.value)])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 458:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "video": {
+	    "width": 750,
+	    "height": 460,
+	    "marginBottom": 80
+	  }
+	}
+
+/***/ },
+
+/***/ 459:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	var modal = __weex_require_module__('modal');
+	module.exports = {
+	  data: function data() {
+	    return {
+	      playStatus: 'play'
+	    };
+	  },
+	  components: {
+	    button: __webpack_require__(387)
+	  },
+	  methods: {
+	    pause: function pause() {
+	      this.playStatus = 'pause';
+	      modal.toast({ 'message': 'click pause' });
+	    },
+	    play: function play() {
+	      this.playStatus = 'play';
+	      modal.toast({ 'message': 'click play' });
+	    },
+	    onpause: function onpause(e) {
+	      this.playStatus = e.playStatus;
+	      modal.toast({ 'message': 'video pause' });
+	    },
+	    onstart: function onstart(e) {
+	      this.playStatus = e.playStatus;
+	      modal.toast({ 'message': 'video start' });
+	    },
+	    onfinish: function onfinish(e) {
+	      this.playStatus = e.playStatus;
+	      modal.toast({ 'message': 'video finish' });
+	    },
+	    onfail: function onfail(e) {
+	      this.playStatus = e.playStatus;
+	      modal.toast({ 'message': 'video fail' });
+	    }
+	  }
+	};
+
+/***/ },
+
+/***/ 460:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('scroller', [_h('video', {
+	    staticClass: ["video"],
+	    attrs: {
+	      "onpause": "onpause",
+	      "onstart": "onstart",
+	      "onfinish": "onfinish",
+	      "onfail": "onfail",
+	      "src": "http://g.tbcdn.cn/ali-wireless-h5/res/0.0.6/toy.mp4",
+	      "auto-play": "true",
+	      "playStatus": _vm.playStatus
+	    }
+	  }), _h('div', {
+	    staticStyle: {
+	      flexDirection: "row",
+	      justifyContent: "center"
+	    }
+	  }, [_h('button', {
+	    attrs: {
+	      "value": "Pause"
+	    },
+	    nativeOn: {
+	      "click": function($event) {
+	        _vm.pause($event)
+	      }
+	    }
+	  }), _h('button', {
+	    staticStyle: {
+	      marginLeft: "20px"
+	    },
+	    attrs: {
+	      "value": "Play",
+	      "type": "primary"
+	    },
+	    nativeOn: {
+	      "click": function($event) {
+	        _vm.play($event)
+	      }
+	    }
+	  })])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/components/web.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/components/web.js b/android/playground/app/src/main/assets/vue/components/web.js
new file mode 100644
index 0000000..01c4680
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/components/web.js
@@ -0,0 +1,459 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(461)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(462)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(463)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/components/web.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 387:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(388)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(389)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(390)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/button.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 388:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "btn": {
+	    "marginBottom": 0,
+	    "alignItems": "center",
+	    "justifyContent": "center",
+	    "borderWidth": 1,
+	    "borderStyle": "solid",
+	    "borderColor": "#333333"
+	  },
+	  "btn-default": {
+	    "color": "rgb(51,51,51)"
+	  },
+	  "btn-primary": {
+	    "backgroundColor": "rgb(40,96,144)",
+	    "borderColor": "rgb(40,96,144)"
+	  },
+	  "btn-success": {
+	    "backgroundColor": "rgb(92,184,92)",
+	    "borderColor": "rgb(76,174,76)"
+	  },
+	  "btn-info": {
+	    "backgroundColor": "rgb(91,192,222)",
+	    "borderColor": "rgb(70,184,218)"
+	  },
+	  "btn-warning": {
+	    "backgroundColor": "rgb(240,173,78)",
+	    "borderColor": "rgb(238,162,54)"
+	  },
+	  "btn-danger": {
+	    "backgroundColor": "rgb(217,83,79)",
+	    "borderColor": "rgb(212,63,58)"
+	  },
+	  "btn-link": {
+	    "borderColor": "rgba(0,0,0,0)",
+	    "borderRadius": 0
+	  },
+	  "btn-txt-default": {
+	    "color": "rgb(51,51,51)"
+	  },
+	  "btn-txt-primary": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-success": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-info": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-warning": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-danger": {
+	    "color": "rgb(255,255,255)"
+	  },
+	  "btn-txt-link": {
+	    "color": "rgb(51,122,183)"
+	  },
+	  "btn-sz-large": {
+	    "width": 300,
+	    "height": 100,
+	    "paddingTop": 25,
+	    "paddingBottom": 25,
+	    "paddingLeft": 40,
+	    "paddingRight": 40,
+	    "borderRadius": 15
+	  },
+	  "btn-sz-middle": {
+	    "width": 240,
+	    "height": 80,
+	    "paddingTop": 15,
+	    "paddingBottom": 15,
+	    "paddingLeft": 30,
+	    "paddingRight": 30,
+	    "borderRadius": 10
+	  },
+	  "btn-sz-small": {
+	    "width": 170,
+	    "height": 60,
+	    "paddingTop": 12,
+	    "paddingBottom": 12,
+	    "paddingLeft": 25,
+	    "paddingRight": 25,
+	    "borderRadius": 7
+	  },
+	  "btn-txt-sz-large": {
+	    "fontSize": 45
+	  },
+	  "btn-txt-sz-middle": {
+	    "fontSize": 35
+	  },
+	  "btn-txt-sz-small": {
+	    "fontSize": 30
+	  }
+	}
+
+/***/ },
+
+/***/ 389:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'default' },
+	    size: { default: 'large' },
+	    value: { default: '' }
+	  }
+	};
+
+/***/ },
+
+/***/ 390:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['btn', 'btn-' + _vm.type, 'btn-sz-' + _vm.size]
+	  }, [_h('text', {
+	    class: ['btn-txt', 'btn-txt-' + _vm.type, 'btn-txt-sz-' + _vm.size]
+	  }, [_vm._s(_vm.value)])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 461:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "wrapper": {
+	    "width": 750,
+	    "position": "absolute",
+	    "top": 0,
+	    "left": 0,
+	    "right": 0,
+	    "bottom": 0
+	  },
+	  "content": {
+	    "position": "absolute",
+	    "top": 0,
+	    "left": 0,
+	    "right": 0,
+	    "bottom": 0,
+	    "marginTop": 0,
+	    "marginBottom": 70
+	  },
+	  "toolbar": {
+	    "flexDirection": "row",
+	    "position": "fixed",
+	    "bottom": 0,
+	    "left": 0,
+	    "right": 0,
+	    "height": 70
+	  }
+	}
+
+/***/ },
+
+/***/ 462:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	var webview = __weex_require_module__('webview');
+	module.exports = {
+	  components: {
+	    button: __webpack_require__(387)
+	  },
+	  methods: {
+	    goback: function goback() {
+	      var el = this.$refs.webview;
+	      webview.goBack(el);
+	    },
+	    goforward: function goforward() {
+	      var el = this.$refs.webview;
+	      webview.goForward(el);
+	    },
+	    refresh: function refresh() {
+	      var el = this.$refs.webview;
+	      webview.reload(el);
+	    },
+	    startload: function startload(e) {},
+	    finishload: function finishload(e) {},
+	    failload: function failload(e) {}
+	  }
+	};
+
+/***/ },
+
+/***/ 463:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    staticClass: ["wrapper"]
+	  }, [_h('div', {
+	    staticClass: ["toolbar"],
+	    appendAsTree: true,
+	    attrs: {
+	      "append": "tree"
+	    }
+	  }, [_h('button', {
+	    staticStyle: {
+	      marginLeft: "30px",
+	      width: "210px",
+	      marginTop: "5px",
+	      marginBottom: "5px"
+	    },
+	    attrs: {
+	      "type": "primary",
+	      "size": "small",
+	      "value": "back"
+	    },
+	    nativeOn: {
+	      "click": function($event) {
+	        _vm.goback($event)
+	      }
+	    }
+	  }), _h('button', {
+	    staticStyle: {
+	      marginLeft: "30px",
+	      width: "210px",
+	      marginTop: "5px",
+	      marginBottom: "5px"
+	    },
+	    attrs: {
+	      "type": "primary",
+	      "size": "small",
+	      "value": "forward"
+	    },
+	    nativeOn: {
+	      "click": function($event) {
+	        _vm.goforward($event)
+	      }
+	    }
+	  }), _h('button', {
+	    staticStyle: {
+	      marginLeft: "30px",
+	      width: "210px",
+	      marginTop: "5px",
+	      marginBottom: "5px"
+	    },
+	    attrs: {
+	      "type": "primary",
+	      "size": "small",
+	      "value": "refresh"
+	    },
+	    nativeOn: {
+	      "click": function($event) {
+	        _vm.refresh($event)
+	      }
+	    }
+	  })]), _h('web', {
+	    ref: "webview",
+	    staticClass: ["content"],
+	    attrs: {
+	      "src": "http://alibaba.github.io/weex/index.html"
+	    },
+	    on: {
+	      "pagestart": _vm.startload,
+	      "pagefinish": _vm.finishload,
+	      "error": _vm.failload
+	    }
+	  })])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/hello.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/hello.js b/android/playground/app/src/main/assets/vue/hello.js
new file mode 100644
index 0000000..6f21da1
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/hello.js
@@ -0,0 +1,99 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* template */
+	var __vue_template__ = __webpack_require__(464)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/hello.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 464:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _vm._m(0)
+	},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', [_h('text', {
+	    staticStyle: {
+	      fontSize: "100px"
+	    }
+	  }, ["Hello World."])])
+	}]}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/iconfont.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/iconfont.js b/android/playground/app/src/main/assets/vue/iconfont.js
new file mode 100644
index 0000000..30ceb05
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/iconfont.js
@@ -0,0 +1,204 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(465)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(466)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(467)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/iconfont.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 465:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "title1": {
+	    "color": "#FF0000",
+	    "fontSize": 36,
+	    "fontFamily": "iconfont1"
+	  },
+	  "title2": {
+	    "color": "#FF0000",
+	    "fontSize": 36,
+	    "fontFamily": "iconfont2"
+	  },
+	  "title3": {
+	    "color": "#FF0000",
+	    "fontSize": 36,
+	    "fontFamily": "iconfont3"
+	  },
+	  "title4": {
+	    "color": "#FF0000",
+	    "fontSize": 36,
+	    "fontFamily": "iconfont4"
+	  }
+	}
+
+/***/ },
+
+/***/ 466:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	var domModule = __weex_require_module__('dom');
+	module.exports = {
+	  created: function created() {
+	    //\u76ee\u524d\u652f\u6301ttf\u3001woff\u6587\u4ef6\uff0c\u4e0d\u652f\u6301svg\u3001eot\u7c7b\u578b
+	    domModule.addRule('font-face', {
+	      'font-family': "iconfont1",
+	      'src': "url('iconfont.ttf')"
+	    });
+	    domModule.addRule('font-face', {
+	      'font-family': "iconfont2",
+	      'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
+	    });
+	    domModule.addRule('font-face', {
+	      'font-family': "iconfont3",
+	      'src': "url('http://at.alicdn.com/t/font_1469606522_9417143.woff')"
+	    });
+	    domModule.addRule('font-face', {
+	      'font-family': "iconfont4",
+	      'src': "url('file:///storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')"
+	    });
+	  }
+	};
+
+/***/ },
+
+/***/ 467:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _vm._m(0)
+	},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', [_h('text', {
+	    staticClass: ["title1"]
+	  }, ["Assets: \ue606\ue605\ue604\ue603\ue602\ue601\ue600"]), _h('text', {
+	    staticClass: ["title2"]
+	  }, ["http ttf: \ue606\ue605\ue604\ue603\ue602\ue601\ue600"]), _h('text', {
+	    staticClass: ["title3"]
+	  }, ["http woff: \ue606\ue605\ue604\ue603\ue602\ue601\ue600"]), _h('text', {
+	    staticClass: ["title4"]
+	  }, ["file: \ue606\ue605\ue604\ue603\ue602\ue601\ue600"])])
+	}]}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file