You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ji...@apache.org on 2017/03/31 02:44:24 UTC
[08/50] [abbrv] incubator-weex git commit: * [html5] use vue-loader
hook to process inline styles.
* [html5] use vue-loader hook to process inline styles.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/2ef6bb0b
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/2ef6bb0b
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/2ef6bb0b
Branch: refs/heads/0.11-dev
Commit: 2ef6bb0b52284f682a6881455ec8cca7346d6c90
Parents: 36a71b1
Author: MrRaindrop <te...@gmail.com>
Authored: Thu Mar 23 00:24:15 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu Mar 23 00:24:15 2017 +0800
----------------------------------------------------------------------
build/webpack.examples.web.config.js | 12 +++
html5/render/vue/README.md | 28 ++++++-
html5/render/vue/components/a.js | 3 +-
html5/render/vue/components/div.js | 5 +-
html5/render/vue/components/image.js | 16 +---
.../render/vue/components/scrollable/header.js | 3 +-
.../vue/components/scrollable/list/cell.js | 5 +-
.../vue/components/scrollable/list/index.js | 3 -
.../components/scrollable/loading-indicator.js | 3 +-
.../render/vue/components/scrollable/loading.js | 3 +-
.../render/vue/components/scrollable/refresh.js | 3 +-
.../vue/components/scrollable/scroller.js | 1 -
html5/render/vue/components/textarea.js | 3 +-
html5/render/vue/components/web.js | 3 +-
html5/render/vue/mixins/style.js | 66 +++++++----------
html5/render/vue/styles/components.css | 6 ++
html5/render/vue/utils/flex.js | 77 --------------------
html5/render/vue/utils/index.js | 28 +++++++
html5/render/vue/utils/style.js | 9 ---
package.json | 3 +-
packages/weex-vue-render/README.md | 28 ++++++-
21 files changed, 139 insertions(+), 169 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/build/webpack.examples.web.config.js
----------------------------------------------------------------------
diff --git a/build/webpack.examples.web.config.js b/build/webpack.examples.web.config.js
index 1235f33..361b79c 100644
--- a/build/webpack.examples.web.config.js
+++ b/build/webpack.examples.web.config.js
@@ -62,6 +62,18 @@ module.exports = {
]
},
vue: {
+ compilerModules: [
+ {
+ postTransformNode: el => {
+ if (el.staticStyle) {
+ el.staticStyle = `$processStyle(${el.staticStyle})`
+ }
+ if (el.styleBinding) {
+ el.styleBinding = `$processStyle(${el.styleBinding})`
+ }
+ }
+ }
+ ],
autoprefixer: {
browsers: ['last 7 versions']
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/README.md
----------------------------------------------------------------------
diff --git a/html5/render/vue/README.md b/html5/render/vue/README.md
index 02e0181..8ca1811 100644
--- a/html5/render/vue/README.md
+++ b/html5/render/vue/README.md
@@ -2,8 +2,30 @@
This is a group of Vue 2.x components for Weex, which have the same behavior with the Weex built-in components on the native.
-It can be run on the browser only based on Vue 2.x (without Weex).
+It can be run on browser only based on Vue 2.x (without Weex).
-## Contributing
+## use vue-loader
-Please see the [Contributing Guide](https://github.com/Hanks10100/weex/issues/10).
+**NOTE: ** you should use `vue-loader` to bundle your `.vue` file, not using `weex-loader`.
+
+you should add config for `vue-loader` as below (`vue-loader` version should be `>= 11.2.0`)
+
+```javascript
+vue: {
+ compilerModules: [
+ {
+ postTransformNode: el => {
+ if (el.staticStyle) {
+ el.staticStyle = `$processStyle(${el.staticStyle})`
+ }
+ if (el.styleBinding) {
+ el.styleBinding = `$processStyle(${el.styleBinding})`
+ }
+ }
+ }
+ ],
+ autoprefixer: {
+ browsers: ['last 7 versions']
+ }
+},
+```
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/a.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/a.js b/html5/render/vue/components/a.js
index 3d69497..784e52e 100644
--- a/html5/render/vue/components/a.js
+++ b/html5/render/vue/components/a.js
@@ -15,8 +15,7 @@ export default {
href: this.href
},
on: this._createEventMap(),
- staticClass: 'weex-a weex-ct',
- staticStyle: this._normalizeInlineStyles(this.$vnode.data)
+ staticClass: 'weex-a weex-ct'
}, this.$slots.default)
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/div.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/div.js b/html5/render/vue/components/div.js
index 93957c1..d697020 100644
--- a/html5/render/vue/components/div.js
+++ b/html5/render/vue/components/div.js
@@ -13,13 +13,10 @@ export default {
// if (process.env.NODE_ENV === 'development') {
// validateStyles('div', this.$vnode.data && this.$vnode.data.staticStyle)
// }
- // const ms = this._getComponentStyle(this.$vnode.data)
return createElement('html:div', {
attrs: { 'weex-type': 'div' },
on: this._createEventMap(),
- staticClass: 'weex-div weex-ct',
- // staticStyle: ms
- staticStyle: this._normalizeInlineStyles(this.$vnode.data)
+ staticClass: 'weex-div weex-ct'
}, trimTextNode(this.$slots.default))
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/image.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/image.js b/html5/render/vue/components/image.js
index 1aec4c1..7f6e8e7 100644
--- a/html5/render/vue/components/image.js
+++ b/html5/render/vue/components/image.js
@@ -1,5 +1,3 @@
-import { extend } from '../utils'
-
/**
* get resize (stetch|cover|contain) related styles.
*/
@@ -7,6 +5,7 @@ function getResizeStyle (context) {
const stretch = '100% 100%'
const resize = context.resize || stretch
const bgSize = ['cover', 'contain', stretch].indexOf(resize) > -1 ? resize : stretch
+ // compatibility: http://caniuse.com/#search=background-size
return { 'background-size': bgSize }
}
@@ -49,15 +48,7 @@ export default {
// if (process.env.NODE_ENV === 'development') {
// validateStyles('image', this.$vnode.data && this.$vnode.data.staticStyle)
// }
-
- // let cssText = `background-image:url("${this.src}");`
-
- // // compatibility: http://caniuse.com/#search=background-size
- // cssText += (this.resize && this.resize !== 'stretch')
- // ? `background-size: ${this.resize};`
- // : `background-size: 100% 100%;`
- const style = this._normalizeInlineStyles(this.$vnode.data)
- // const ms = this._getComponentStyle(this.$vnode.data)
+ // const style = this._normalizeInlineStyles(this.$vnode.data)
const wh = this._getSize(this.$vnode.data)
return createElement('figure', {
attrs: {
@@ -67,8 +58,7 @@ export default {
},
on: this._createEventMap(['load', 'error']),
staticClass: 'weex-image weex-el',
- staticStyle: extend(style, getResizeStyle(this))
- // staticStyle: extend(ms, getResizeStyle(this))
+ staticStyle: getResizeStyle(this)
})
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/scrollable/header.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/header.js b/html5/render/vue/components/scrollable/header.js
index 384657d..f8d206c 100644
--- a/html5/render/vue/components/scrollable/header.js
+++ b/html5/render/vue/components/scrollable/header.js
@@ -51,8 +51,7 @@ export default {
on: this._createEventMap(),
ref: 'header',
staticClass: 'weex-header weex-ct',
- class: { sticky: this.sticky, iossticky: this.supportSticky },
- staticStyle: this._normalizeInlineStyles(this.$vnode.data)
+ class: { sticky: this.sticky, iossticky: this.supportSticky }
}, this.$slots.default)
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/scrollable/list/cell.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/list/cell.js b/html5/render/vue/components/scrollable/list/cell.js
index 7c16b61..3650aec 100644
--- a/html5/render/vue/components/scrollable/list/cell.js
+++ b/html5/render/vue/components/scrollable/list/cell.js
@@ -6,13 +6,10 @@ export default {
// if (process.env.NODE_ENV === 'development') {
// validateStyles('cell', this.$vnode.data && this.$vnode.data.staticStyle)
// }
- // const ms = this._getComponentStyle(this.$vnode.data)
return createElement('section', {
attrs: { 'weex-type': 'cell' },
on: this._createEventMap(),
- staticClass: 'weex-cell weex-ct',
- // staticStyle: ms
- staticStyle: this._normalizeInlineStyles(this.$vnode.data)
+ staticClass: 'weex-cell weex-ct'
}, this.$slots.default)
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/scrollable/list/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/list/index.js b/html5/render/vue/components/scrollable/list/index.js
index 9f41b3b..f48a6c8 100644
--- a/html5/render/vue/components/scrollable/list/index.js
+++ b/html5/render/vue/components/scrollable/list/index.js
@@ -48,7 +48,6 @@ export default {
// if (process.env.NODE_ENV === 'development') {
// validateStyles('list', this.$vnode.data && this.$vnode.data.staticStyle)
// }
- // const ms = this._getComponentStyle(this.$vnode.data)
this.$nextTick(() => {
this.updateLayout()
})
@@ -57,8 +56,6 @@ export default {
ref: 'wrapper',
attrs: { 'weex-type': 'list' },
staticClass: this.wrapperClass,
- staticStyle: this._normalizeInlineStyles(this.$vnode.data),
- // staticStyle: ms,
on: extend(this._createEventMap(), {
scroll: this.handleListScroll,
touchstart: this.handleTouchStart,
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/scrollable/loading-indicator.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/loading-indicator.js b/html5/render/vue/components/scrollable/loading-indicator.js
index 3c4f6ca..28ee909 100644
--- a/html5/render/vue/components/scrollable/loading-indicator.js
+++ b/html5/render/vue/components/scrollable/loading-indicator.js
@@ -3,8 +3,7 @@ export default {
this.weexType = 'loading-indicator'
return createElement('mark', {
attrs: { 'weex-type': 'loading-indicator' },
- staticClass: 'weex-loading-indicator weex-ct',
- staticStyle: this._normalizeInlineStyles(this.$vnode.data)
+ staticClass: 'weex-loading-indicator weex-ct'
})
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/scrollable/loading.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/loading.js b/html5/render/vue/components/scrollable/loading.js
index 25af8fa..ebf99d3 100644
--- a/html5/render/vue/components/scrollable/loading.js
+++ b/html5/render/vue/components/scrollable/loading.js
@@ -75,8 +75,7 @@ export default {
return createElement('aside', {
ref: 'loading',
attrs: { 'weex-type': 'loading' },
- staticClass: 'weex-loading weex-ct',
- staticStyle: this._normalizeInlineStyles(this.$vnode.data)
+ staticClass: 'weex-loading weex-ct'
}, this.getChildren())
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/scrollable/refresh.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/refresh.js b/html5/render/vue/components/scrollable/refresh.js
index fb1efd5..884f2ee 100644
--- a/html5/render/vue/components/scrollable/refresh.js
+++ b/html5/render/vue/components/scrollable/refresh.js
@@ -83,8 +83,7 @@ export default {
return createElement('aside', {
ref: 'refresh',
attrs: { 'weex-type': 'refresh' },
- staticClass: 'weex-refresh weex-ct',
- staticStyle: this._normalizeInlineStyles(this.$vnode.data)
+ staticClass: 'weex-refresh weex-ct'
}, this.getChildren())
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/scrollable/scroller.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/scroller.js b/html5/render/vue/components/scrollable/scroller.js
index 6890d20..1636270 100644
--- a/html5/render/vue/components/scrollable/scroller.js
+++ b/html5/render/vue/components/scrollable/scroller.js
@@ -76,7 +76,6 @@ export default {
ref: 'wrapper',
attrs: { 'weex-type': 'scroller' },
staticClass: this.wrapperClass,
- staticStyle: this._normalizeInlineStyles(this.$vnode.data),
on: extend(this._createEventMap(), {
scroll: this.handleScroll,
touchstart: this.handleTouchStart,
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/textarea.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/textarea.js b/html5/render/vue/components/textarea.js
index 3e3092d..8cd101f 100644
--- a/html5/render/vue/components/textarea.js
+++ b/html5/render/vue/components/textarea.js
@@ -42,8 +42,7 @@ export default {
value: this.value
},
on: this.createKeyboardEvent(events),
- staticClass: 'weex-textarea weex-el',
- staticStyle: this._normalizeInlineStyles(this.$vnode.data)
+ staticClass: 'weex-textarea weex-el'
}, this.value)
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/components/web.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/web.js b/html5/render/vue/components/web.js
index 1272b88..06da79a 100644
--- a/html5/render/vue/components/web.js
+++ b/html5/render/vue/components/web.js
@@ -45,8 +45,7 @@ export default {
src: this.src
},
on: this._createEventMap(['error']),
- staticClass: 'weex-web weex-el',
- staticStyle: this._normalizeInlineStyles(this.$vnode.data)
+ staticClass: 'weex-web weex-el'
})
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/mixins/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/mixins/style.js b/html5/render/vue/mixins/style.js
index dca16a5..6cf47cd 100644
--- a/html5/render/vue/mixins/style.js
+++ b/html5/render/vue/mixins/style.js
@@ -1,15 +1,10 @@
-import { extend, trimComment, normalizeStyles } from '../utils'
+import {
+ camelizeKeys,
+ extend,
+ trimComment
+} from '../utils'
import { tagBegin, tagEnd } from '../utils/perf'
-// import { validateStyles } from '../validator'
-
-// let warned = false
-
-// function hyphenateExtend (to, from) {
-// if (!from) { return }
-// for (const k in from) {
-// to[hyphenate(k)] = from[k]
-// }
-// }
+import addPrefix from 'inline-style-prefixer/static'
function getHeadStyleMap () {
if (process.env.NODE_ENV === 'development') {
@@ -76,11 +71,18 @@ export default {
},
methods: {
-
- _normalizeInlineStyles (data) {
- const style = extend({}, data.staticStyle, data.style)
- const res = normalizeStyles(style)
- return res
+ $processStyle (style, hyphenated) {
+ if (window._process_style) {
+ return window._process_style(style)
+ }
+ if (style.display === 'flex') {
+ this.$nextTick(() => {
+ if (this.$el) {
+ this.$el.classList.add('weex-flex-ct')
+ }
+ })
+ }
+ return addPrefix(camelizeKeys(style))
},
_getScopeStyle (classNames) {
@@ -134,40 +136,26 @@ export default {
return wh
},
- // get style from class, staticClass, style and staticStyle.
+ /**
+ * get style from class, staticClass, style and staticStyle.
+ * merge styles priority: high -> low
+ * 1. data.style (bound style).
+ * 2. data.staticStyle (inline styles).
+ * 3. data.class style (bound class names).
+ * 4. data.staticClass style (scoped styles or static classes).
+ */
_getComponentStyle (data) {
const staticClassNames = (typeof data.staticClass === 'string') ? data.staticClass.split(' ') : (data.staticClass || [])
const classNames = (typeof data.class === 'string') ? data.class.split(' ') : (data.class || [])
- /**
- * merge styles. priority: high -> low
- * 1. data.style (bound style).
- * 2. data.staticStyle (inline styles).
- * 3. data.class style (bound class names).
- * 4. data.staticClass style (scoped styles or static classes).
- */
const clsNms = staticClassNames.concat(classNames)
const style = this._getScopeStyle(clsNms)
- const res = normalizeStyles(extend(style, data.staticStyle, data.style))
+ const res = extend(style, data.staticStyle, data.style)
return res
},
- // merge static styles and static class styles into $vnode.data.mergedStyles.
- _mergeStyles () {
- const vnode = this.$options._parentVnode || {}
- const data = vnode.data
- if (!data) { return }
- this.$options._parentVnode.data.staticStyle = this._getComponentStyle(data)
- },
-
_getParentRect () {
const parentElm = this.$options._parentElm
return parentElm && parentElm.getBoundingClientRect()
- },
-
- _getParentRectAsync (cb) {
- this.$nextTick(function () {
- return cb && cb.call(this, this.getParentRectSync())
- })
}
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/styles/components.css
----------------------------------------------------------------------
diff --git a/html5/render/vue/styles/components.css b/html5/render/vue/styles/components.css
index a2e116f..3427307 100644
--- a/html5/render/vue/styles/components.css
+++ b/html5/render/vue/styles/components.css
@@ -4,6 +4,12 @@
border-style: solid;
}
+.weex-flex-ct {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+}
+
.weex-ct {
box-sizing: border-box;
display: -webkit-box;
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/utils/flex.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/flex.js b/html5/render/vue/utils/flex.js
deleted file mode 100644
index 4f77c90..0000000
--- a/html5/render/vue/utils/flex.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { extend } from './func'
-
-const valueMap = {
- alignItems: {
- stretch: 'stretch',
- 'flex-start': 'start',
- 'flex-end': 'end',
- center: 'center'
- },
-
- flexDirection: {
- row: 'horizontal',
- column: 'vertical'
- },
-
- justifyContent: {
- 'flex-start': 'start',
- 'flex-end': 'end',
- center: 'center',
- 'space-between': 'justify',
- 'space-around': 'justify' // Just same as `space-between`
- }
-}
-
-const filters = {
- flex (value) {
- return {
- '-webkit-box-flex': value,
- '-webkit-flex': value,
- 'flex': value
- }
- },
-
- 'align-items' (value) {
- return {
- '-webkit-box-align': valueMap.alignItems[value],
- '-webkit-align-items': value,
- 'align-items': value
- }
- },
-
- 'align-self' (value) {
- return {
- '-webkit-align-self': value,
- 'align-self': value
- }
- },
-
- 'flex-direction' (value) {
- return {
- '-webkit-box-orient': valueMap.flexDirection[value],
- '-webkit-flex-direction': value,
- 'flex-direction': value
- }
- },
-
- 'justify-content' (value) {
- return {
- '-webkit-box-pack': valueMap.justifyContent[value],
- '-webkit-justify-content': value,
- 'justify-content': value
- }
- }
-}
-
-export function normalize (styles) {
- const res = {}
- for (const key in styles) {
- if (typeof filters[key] !== 'function') {
- res[key] = styles[key]
- }
- else {
- extend(res, filters[key](styles[key]))
- }
- }
- return res
-}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/utils/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/index.js b/html5/render/vue/utils/index.js
index d3c2d5b..46142a8 100644
--- a/html5/render/vue/utils/index.js
+++ b/html5/render/vue/utils/index.js
@@ -24,6 +24,14 @@ export const camelize = cached(str => {
return str.replace(camelizeRE, (_, c) => c.toUpperCase())
})
+export function camelizeKeys (obj) {
+ const res = {}
+ for (const key in obj) {
+ res[camelize(key)] = obj[key]
+ }
+ return res
+}
+
/**
* Capitalize a string.
*/
@@ -42,6 +50,26 @@ export const hyphenate = cached(str => {
.toLowerCase()
})
+export function hyphenateKeys (obj) {
+ const res = {}
+ for (const key in obj) {
+ res[hyphenate(key)] = obj[key]
+ }
+ return res
+}
+
+// const vendorsReg = /webkit-|moz-|o-|ms-/
+// export function hyphenateStyleKeys (obj) {
+// const res = {}
+// for (const key in obj) {
+// const hk = hyphenate(key).replace(vendorsReg, function ($0) {
+// return '-' + $0
+// })
+// res[hk] = obj[key]
+// }
+// return res
+// }
+
export function camelToKebab (name) {
if (!name) { return '' }
return name.replace(/([A-Z])/g, function (g, g1) {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/html5/render/vue/utils/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/utils/style.js b/html5/render/vue/utils/style.js
index 5892361..cc7f8e4 100644
--- a/html5/render/vue/utils/style.js
+++ b/html5/render/vue/utils/style.js
@@ -1,5 +1,3 @@
-import { normalize } from './flex'
-
/**
* remove comments from a cssText.
*/
@@ -7,13 +5,6 @@ export function trimComment (cssText) {
return cssText.replace(/(?:\/\*)[^*]*\*\//g, '')
}
-/**
- * add flex prefixes for compatibility conisderation.
- */
-export function normalizeStyles (style) {
- return normalize(style)
-}
-
let support = null
export function supportSticky () {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 23210f0..cf933b9 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
"cubicbezier": "^0.1.1",
"envd": "^0.1.1",
"httpurl": "^0.1.1",
+ "inline-style-prefixer": "^3.0.2",
"lazyimg": "^0.1.5",
"modals": "^0.1.6",
"query-string": "^4.2.3",
@@ -136,7 +137,7 @@
"sinon-chai": "^2.8.0",
"uglify-js": "^2.6.4",
"vue": "^2.1.10",
- "vue-loader": "^10.0.1",
+ "vue-loader": "^11.2.0",
"vue-template-compiler": "^2.1.10",
"webdriver-client": "~1.0.0",
"webpack": "^1.13.1",
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2ef6bb0b/packages/weex-vue-render/README.md
----------------------------------------------------------------------
diff --git a/packages/weex-vue-render/README.md b/packages/weex-vue-render/README.md
index b824fd0..8ca1811 100644
--- a/packages/weex-vue-render/README.md
+++ b/packages/weex-vue-render/README.md
@@ -1,5 +1,31 @@
-# Vue Components for Weex
+# Vue Web Renderer for Weex
This is a group of Vue 2.x components for Weex, which have the same behavior with the Weex built-in components on the native.
It can be run on browser only based on Vue 2.x (without Weex).
+
+## use vue-loader
+
+**NOTE: ** you should use `vue-loader` to bundle your `.vue` file, not using `weex-loader`.
+
+you should add config for `vue-loader` as below (`vue-loader` version should be `>= 11.2.0`)
+
+```javascript
+vue: {
+ compilerModules: [
+ {
+ postTransformNode: el => {
+ if (el.staticStyle) {
+ el.staticStyle = `$processStyle(${el.staticStyle})`
+ }
+ if (el.styleBinding) {
+ el.styleBinding = `$processStyle(${el.styleBinding})`
+ }
+ }
+ }
+ ],
+ autoprefixer: {
+ browsers: ['last 7 versions']
+ }
+},
+```