Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
weex-vue-render
Advanced tools
Readme
Web renderer for weex project. Support Vue 2.x syntax.
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>
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:
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)
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.
You should use the previous mentioned plugins in your vue-loader configuration.
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. |
# build for weex-vue-render package
npm run build
# debug and serve examples
npm run dev
# build and run test cases
npm run test
FAQs
Web renderer for weex project written in Vue DSL.
We found that weex-vue-render demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).