Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

weex-vue-render

1.0.26 • Public • Published

weex-vue-render

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

build vuejs2.x pkg down Package Quality

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

install

npm i weex-vue-render

Downloadsweekly downloads

1,743

version

1.0.26

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar