前面幾篇文章大致上把專案的初始建置完成，也放了一版於github可以參考。

這邊我預計想要以一個簡單的主題來實作：房屋管理
大致上會有有幾個主體(約略想)：

1. 人 (房東、住戶)
2. 房屋
3. 合約

在開始專案前，router的配建可以先處理，詳如這裡，

未來有實作到其他的功能，在來一一說明。
幾個重點：
lazyloading (先前介紹過)
@ => 是alias，指向src
檔名記得要.vue
不知明的網址處理，一定要放在最後面，因為router會由上到下找

export default new Router({
  routes: [
    {
    // 歡迎頁面
      path: "/",
      name: "welcome",
      component: Welcome
    },
    {
    // 功能頁面
      path: "/category",
      name: "category",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "@/components/Category.vue")
    },
    {
    // 用戶頁面
      path: "/user",
      name: "user",
      component: () => import("@/components/user/user-main.vue")
    },
    {
    // 房屋頁面
      path: "/house",
      name: "house",
      component: () => import("@/components/house/house-main.vue")
    },
    {
    // 合約頁面
      path: "/contract",
      name: "contract",
      component: () => import("@/components/contract/contract-main.vue")
    },
    {
    // 不知名網址處理
      path: "/*",
      redirect: "/"
    }
  ]
});

接著可以在component目錄中新增一些vue檔來用

把於router設定的path在頁面上設定好。

<router-link to="/category">Go to Foo</router-link>

或是用function的方式，未來如果要帶參數不用再改寫。

<md-button class="md-icon-button" @click="GoRoute('/category')">

GoRoute(route) {
    this.$router.push(route);
  }

接著可以套用一下vue-material來簡化我們美工畫面的時間

npm i vue-material

在App.vue中注入
如果是要最佳化編出來的程式碼，就不要import vuematerial一整個，
專案有用到什麼就import什麼。

<script>
import Vue from "vue";
import VueMaterial from "vue-material";
import "vue-material/dist/vue-material.min.css";
import "vue-material/dist/theme/default.css";
Vue.use(VueMaterial);
export default {
  name: "App"
};
</script>

在頁面上測試一下
<md-button class="md-raised" :md-ripple="false">Start</md-button>

完工

今天大概配置一下router & material，先簡單的讓專案骨架出來，
之後在看需求把東西慢慢加上去，目前我上面提供的github連結也已經有一版了，
抓下來，npm install一下就可以用了。

先這樣囉~~~!!