We developed a complete project based on Weex and Vue.js which named weex-hackernews. We used Vuex and vue-loader in it, and it works well on both iOS, Android and web.
Vuex is a state management pattern + library for Vue.js applications. it’s also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
As a kind of state management library, Vuex is platform-independent, It also can be used in Weex. Read its official documents for more details.
It also integrates with Vue’s official devtools extension to provide advanced features on web platform, such as zero-config time-travel debugging and state snapshot export / import. (web platform only)
Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, you are already composing our application with components. When adding vue-router to the mix, all you need to do is map your components to the routes and let vue-router know where to render them.
However, there are many difference between web and Android or iOS, some features of vue-router are limited in Weex.
vue-router provides three routing modes:
hash: uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support HTML5 History API. (default)
history: requires HTML5 History API and server config. See HTML5 History Mode.
You can pass the
mode parameter when creating a router:
Obviously “hash” mode and “history” mode are only available on the web, and have no effect in Weex. That is, you have to use “abstract” mode in Android and iOS. However, vue-router will automatically be forced into “abstract” mode if no browser API is present. so, just don’t set the
mode option, or set it to “abstract”.
<router-link> to create a navigation link, but in which some of the features based on the DOM events, it doesn’t work well in the native environment. In Weex, you must use the Programmatic Navigation to manage the router.
Here is an basic example using
For native platforms, you have to use the