iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

VUE & PHP (Apache2) & Docker 實戰開發系列 第 8

Day8 - Vue 專案啟動 Routing & Material

前面幾篇文章大致上把專案的初始建置完成,也放了一版於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一下就可以用了。

先這樣囉~~~!!


上一篇
Day7 - Vue-Lazyloading & Service worker Hook
下一篇
Day9 - PHP-Laravel 建立假資料功能
系列文
VUE & PHP (Apache2) & Docker 實戰開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言