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).
If you prefer npm way, you should manually call init
function to pass Vue constructor to weex.
import Vue from 'vue' import weex from 'weex-vue-render' weex.init(Vue) import App from 'App.vue' new Vue(App)
If you perfer cdn way, and use script tag to import a script link, just import it into your html file, it will auto-init and you can just ignore it.
<script>{{Vue}}</script> <script>{{weex-vue-render}}</script> <script>{{your js bundle}}</script>
You can juse use a render-core in your page, and define your needs for the plugins (components and API modules) in your entry file, so that your would save a lot of bundle size and bandwidth. On the other hand, The full version contains all the built-in components and API modules, which will waste a lot of bundle size and bandwidth if you haven't use most of them.
To use the render-core and the plugins, just install the plugins in your entry file.
import Vue from 'vue' // import render-core. import weex from 'weex-vue-render/dist/index.core' // import the plugins (components and modules) you want to use. import slider from 'weex-vue-slider' import stream from 'weex-vue-stream' // init weex. weex.init(Vue) // install the plugins. weex.install(slider) weex.install(stream) import App from 'App.vue' new Vue(App)
These components have already integrated into render-core. You don't have to import and install them:
npm module name | component name |
---|---|
weex-vue-a | a |
weex-vue-input | input |
weex-vue-slider | slider / slider-neighbor |
weex-vue-switch | switch |
weex-vue-textarea | textarea |
weex-vue-video | video |
weex-vue-web | web |
npm module name | API module name |
---|---|
weex-vue-animation | animation |
weex-vue-clipboard | clipboard |
weex-vue-dom | dom |
weex-vue-event | event |
weex-vue-geolocation | geolocation |
weex-vue-global-event | globalEvent |
weex-vue-modal | modal |
weex-vue-nav | navigator |
weex-vue-storage | storage |
weex-vue-stream | stream |
weex-vue-websocket | websocket |
weex-vue-webview | webview |
Some of the above plugins may not be mentioned in weex documents. Just ignore them if you have no idear about what they are and how to use them.
You can develop more plugins for your app. Accordingly the same plugin for other two platforms (iOS and Android) should also be built and intergrated in your app if you want it run on all three platforms.
Use weex-vue-bundle-util
to scan you code, which will return a promise with a object to tell which components and modules you have used in your project, so that can generate a entry file accordingly to import those plugins.
https://github.com/weexteam/weex-vue-bundle-util
You can see the examples of weex built in this way by running the script npm run build:vue:examples
, and use the <script src="./dist/render.vue.js"></script>
as the render in the vue.html
file.
NOTE: you should inject $processStyle
to preprocess vnode‘s style in vue-loader’s postTransformNode hook.
vue: { /** * important! should use postTransformNode to add $processStyle for * inline style prefixing. */ compilerModules: [ { postTransformNode: el => { el.staticStyle = `$processStyle(${el.staticStyle})` el.styleBinding = `$processStyle(${el.styleBinding})` } } ], }
weex-vue-render/dist/index.core.js
.image.save
for <image>
component.modal.toast
on android.env.deviceHeight
after window's resizing.<a>
link, or it is a <a>
link and has a prevent
attribute on it.stream.fetch
for adding wrong suffix to the request url.component | dom element | children | note |
---|---|---|---|
scroller | /main | /main/div/x | - |
list | /main | /main/div/x | - |
cell | /sect | /sect/x | - |
header | /head | /head/x | - |
loading | /asid | /aside/x | - |
loading-indicator | /mark | /mark/x | - |
refresh | /asid | /aside/x | - |
slider | /nav | x -> /ul/li/x, indicator -> /nav/nav | - |
indicator | /nav | - | indicator points: /nav/mark |
a | /a | /a/x | - |
div | /div | /div/x | - |
image | /figure | - | - |
input | /input | - | - |
switch | /span | - | round button: /span/small |
text | /p | - | - |
textarea | /textarea | - | - |
video | /video | - | - |
web | /iframe | - | - |