• Stars
    star
    143
  • Rank 257,007 (Top 6 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created almost 7 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

vue-render-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.

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

More Repositories

1

article

This repos is a third party collection, and is not developed nor maintained by Apache Weex.
1,223
star
2

hackernews-App-powered-by-Apache-Weex

Java
1,153
star
3

vue-framework-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
297
star
4

devtool-for-Apache-Weex

debugger tools with chrome devtool for Apache Weex
JavaScript
258
star
5

android-devtools-for-Apache-Weex

Remote debug for your native Android app using Chrome Developer Tools
Java
165
star
6

devtool-iOS-for-Apache-Weex

Remote debug for your native iOS app using Chrome Developer Tools
Objective-C
124
star
7

analyzer-of-android-for-Apache-Weex

Java
109
star
8

devtool-extension-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
31
star
9

vue-loader-for-apache-weex

vue-loader-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
30
star
10

picker-for-Apache-Weex

picker for Apache Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
20
star
11

previewer-tool-for-Apache-Weex

a tool help user to preview their weex files
JavaScript
20
star
12

downgrade-for-Apache-Weex

A module in order to downgrade to web for Apache Weex
JavaScript
19
star
13

intellij-plugin-for-Apache-Weex

intellij-plugin-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Kotlin
19
star
14

pack-android-tools-for-Apache-Weex

pack-android-tools-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Java
13
star
15

a-builder-for-apache-weex

a-builder-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
13
star
16

analyzer-of-iOS-for-Apache-Weex

analyzer-of-iOS-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Objective-C
9
star
17

styler-transformer-for-Apache-Weex

styler-transformer-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
9
star
18

templater-for-Apache-Weex

templater-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
7
star
19

weex-ui

Vue
7
star
20

xtoolkit-for-Apache-Weex

A toolkit for CLI-for-Apache-Weex
JavaScript
7
star
21

DSL-transformer-for-Apache-Weex

DSL-transformer-for-Apache-Weex is is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
7
star
22

Rax-Framework-for-Apache-Weex

Rax-Framework-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
7
star
23

pack-ios-tools-for-Apache-Weex

pack-ios-tools-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Objective-C
5
star
24

rx-webpack-plugin-for-Apache-Weex

This repos is a third party collection, and is not developed nor maintained by Apache Weex.
4
star
25

scripter-transformer-for-Apache-Weex

<script> transformer for Apache Weex
JavaScript
4
star
26

gulp-for-weex-transformer

gulp plugin for weex transformer
JavaScript
4
star
27

eslint-config-weex-for-Apache-Weex

eslint-config-weex-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
4
star
28

Template-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
4
star
29

vue-precompiler-for-apache-weex

vue-precompiler-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
4
star
30

pack-create-for-Apache-Weex

pack-create-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
4
star
31

vdom-tester-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
3
star
32

Plugin-demo-for-Apache-Weex

Plugin-demo-for-Apache-Weex is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
3
star
33

rx-generator-for-Apache-Weex

rx generator for Apache Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
3
star
34

weex-loader

JavaScript
2
star
35

website

The source code of weex website.
SCSS
2
star
36

wd-for-Apache-Weex

wd-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
2
star
37

pack-lib-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
1
star
38

env

This repos is a third party work, and is not developed nor maintained by Apache Weex.
JavaScript
1
star
39

Container-iOS-plugin-for-Apache-Weex

Container-iOS-plugin-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Objective-C
1
star
40

pack-common-for-Apache-Weex

pack-common-for-Apache-Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
1
star
41

wwp-for-Apache-Weex

wwp for Apache Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
JavaScript
1
star
42

weex-toolkit

JavaScript
1
star
43

android-plugin-for-weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
Java
1
star
44

vue

πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
JavaScript
1
star