介紹

用 Vue.js + vue-router 建立單頁應用，是非常簡單的。使用 Vue.js 時，我們就已經把元件組合成一個應用了，當你要把 vue-router 加進來，只需要配置元件和路由對映，然後告訴 vue-router 在哪裡渲染它們。

Vue in Weex
Vue.js 是 Evan You 開發的漸進式 JavaScript 框架，在易用性、靈活性和效能等方面都非常優秀。開發者能夠通過撰寫 *.vue 檔案，基於 <template>, <style>, <script> 快速構建元件化的 web 應用。

Vue.js 在 2016 年 10 月正式釋出了 2.0 版本，該版本加入了 Virtual-DOM 和預編譯器的設計，使得該框架在執行時能夠脫離 HTML 和 CSS 解析，只依賴 JavaScript；同時 Virtual-DOM 也使得 Vue 2.x 渲染成原生 UI 成為了可能。

目前 Weex 與 Vue 正在展開官方合作，並將 Vue 2.x 作為內建的前端框架，Vue 也因此具備了開發原生應用的能力。

Vue.js簡單使用：

<template>
  <div class="wrapper">
    <text class="weex">Hello Weex !</text>
    <text class="vue">Hello Vue !</text>
  </div>
</template>
<style scoped>
  .wrapper
 
 {
    flex-direction: column;
    justify-content: center;
  }
  .weex {
   font-size: 60px;
   text-align: center;
   color: #1B90F7;
  }
  .vue {
   font-size: 60px;
   text-align: center;
   margin-top: 30px;
   color: #41B883;
  }
</style>

Vue.js 也有較多周邊技術產品，如 Vuex 和 vue-router 等，這些庫也可以在 Weex 中很好的工作。

接下來，只介紹vue-router，Vuex不作相關介紹，詳情請訪問官網文件。

vue-router 是專為 Vue.js 開發的便於實現單頁應用的工具庫，能夠以宣告式的方法編寫頁面的導航和跳轉資訊。

說白了，就是路由功能。

安裝

由於我們是原生和weex混合使用，所以我們就直接下載vue、vue-router的js檔案並引用即可。

直接下載

vue-router

vue

推薦：unpkg, 會保持和 npm 釋出的最新的版本一致。可以在unpkg.com/vue/ 瀏覽 npm 包資源。

注： 開發環境不要用最小壓縮版，不然就失去了錯誤提示和警告!

使用

在 Vue 後面載入 vue-router，它會自動安裝的：

<script src="./plug-in/vue/vue.js"></script>
<script src="./plug-in/vue/vue-router.js"></script>

或

<script>
  import vue from './plug-in/vue/vue.js'
  import router from './plug-in/vue/vue-router.js'
  ...
</script>

程式碼示例

待續…