weex-vue-render

Web renderer for weex project. Support Vue 2.x syntax.

How To Use

We strongly suggest you use v1.x instead of 0.12.x, according to performance issue.

npm install weex-vue-render

// import vue runtime.
const Vue = require('vue/dist/vue.runtime.common').default
// import weex-vue-render
const weex = require('weex-vue-render')
// init the weex instance.
weex.init(Vue)
// import your .vue App.
const App = require('App.vue')
// must have a '#root' element in your html body.
App.$el = '#root'
// instantiate
new App()

The way to require ES modules and CommonJS modules may have a slice of difference between different versions of Vue and Vue-loader, and this is totally depending on Vue and the loader, so please check out related documents.

If your import the UMD formated bundle to the html, then you dont't have to call init manually.

<script>{{Vue runtime}}</script>
<script>{{weex-vue-render}}</script>
<script>{{your web.bundle.js}}</script>

pack your .vue file to web.bundle.js

You should pack your web.bundle.js and native.bundle.js separately. Use weex-loader for native packing and use vue-loader for web packing.

Use vue-loader to pack your code for web.bundle.js.

If you are using weex-vue-render@1.x , You should definitely use below plugins to get things work:

• weex-vue-precompiler
• autoprefixer
• postcss-plugin-weex
• postcss-plugin-px2rem

We use weex-vue-precompiler instead of $processStyle in 1.x verison.

Now, how to use this plugins to pack you web.bundle.js ? We use them in the vue-loader option.

Here is a vue-loader option example:

{ // webpack config.
  vue: {
    optimizeSSR: false,
    postcss: [
      // to convert weex exclusive styles.
      require('postcss-plugin-weex')(),
      require('autoprefixer')({
        browsers: ['> 0.1%', 'ios >= 8', 'not ie < 12']
      }),
      require('postcss-plugin-px2rem')({
        // base on 750px standard.
        rootValue: 75,
        // to leave 1px alone.
        minPixelValue: 1.01
      })
    ],
    compilerModules: [
      {
        postTransformNode: el => {
          // to convert vnode for weex components.
          require('weex-vue-precompiler')()(el)
        }
      }
    ]
  }
}

You should use a .js file as your webpack entry, not the Main.vue or App.vue file.

The content of your entry file main.js should be like this:

// import Vue runtime if you like.
// import weex-vue-render if you like.
// init weex if you imported it.
// at least it should have this:
import App from './your/App.vue'
App.el = '#root'
new Vue(App)

How to Migrate from 0.12.x to 1.x

Why should I update to 1.x ?

The answer is enoumouse change in rendering performance with a few minor updates in your code is definitely worth to try.

packing configuration

You should use the previous mentioned plugins in your vue-loader configuration.

check your code

| category | rules | 0.12.x | 1.x | | --- | ---- | ------ | ----- | | render function | create weex component in render function | support | supported in >=1.0.11 | | event binding | bind native events for custom component's root element | @click | @click.native doc | | styles | style binding | none | better performance for binding object literal like :style="{width:w,height:h}" instead of object variable like :style="someObj" | | | styles in animation.transition | none | should add css prefix manualy if needed. We suggest you use transition to implement animation. | | exclusive styles | limit | none | wirte them in <style> tag for better performance. | | | wx unit | support | only in binding style (will fix soon) | | ref | what this.$refs.xx will get | always instance of VueComponent | HTMLElement for div, image and text; VueComponent for other components. |

Develop

# build for weex-vue-render package
npm run build
# debug and serve examples
npm run dev
# build and run test cases
npm run test