[day15]Vue实作-bootstrapVue建立导览列

上一篇建置好最原始的专案档，接下来要开始来开发社区网站。
首先，因为对vue.js还只是初学而已，一开始当然是来搜寻看看有没有其他人分享的网站架构可以参考?
配合这次的主题，就来搜寻vue.js 购物网站
找到了几篇可以直接参考的实作分享，好像都是由某教学网站延伸的实作，
这次就跟着这些教学范例实作罗

1. 用Vue & Firebase 实作简易购物网站 01.前言
2. vii120/vue-ec-shop: 使用vue router制作可下单的购物网站
3. vii120/vue-ec-admin: vue购物网站：後台管理系统 - GitHub

范例中都是使用Vue及Firebase进行建置，而Vue是使用bootstrap4为前端框架，我自己是习惯用bootstrapVue，由於没有那麽熟悉Vue开发，中间遇到蛮多困难的，接下来分享是我自己跟着范例实作及调整成铁人赛网页架构的过程。
主要是follow第一篇文章进行，并调整成规划的样子，测看看罗!!

用bootstrapVue建立导览列

先照着范例做
调整App.vue，也按照自己想要的改了一些东西。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>

</script>

<style>

#app {
  font-family:'cwTeXYen', Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

建立分页及调整router.js

• router.js新增routes

import Vue from "vue";
import Router from "vue-router";

import Home from "./components/Home.vue";
import User from "./components/User.vue";


import Profile from "./components/Profile.vue";
import Orders from "./components/Orders.vue";
import MProducts from "./components/MProducts.vue";

Vue.use(Router);

const router =  new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },  
    {
      path: "/about",
      name: "about",
      component: () =>
        import("./components/About.vue")
    },
    {
      path: "/products",
      name: "products",
      component: () =>
        import("./components/Products.vue")
    },
    {
      path: "/stores",
      name: "stores",
      component: () =>
        import("./components/Stores.vue")
    },
    {
      path: "/news",
      name: "news",
      component: () =>
        import("./components/News.vue")
    },
 
  ]
});

export default router;

• 要建立的分页如下
  • About.vue

  <template>
    <div class="about"> 
      <div class="container">
          <h1 class="text-center p-5">About Us</h1>
      </div>
    </div>
  </template>
  

  • News.vue

  <template>
    <div class="news">
      <div class="container">
          <h1 class="text-center p-5">News</h1>
      </div>
    </div>
  </template>
  

  • Products.vue

  <template>
    <div class="products">
      <div class="container">
          <h1 class="text-center p-5">Our Products</h1>
      </div>
    </div>
  </template>
  

  • Stores.vue

  <template>
    <div class="stores">
      <div class="container">
          <h1 class="text-center p-5">Stores Information</h1>
      </div>
    </div>
  </template>
  

建置浏览列

这边照着范例走，因为对Vue不够熟悉，感觉能跑就是好程序，後来才做大改，主要是因为作者是bootstrap4 ，而我是用bootstrapVue，有些地方有些问题，无法跳出我的页面，但目前功能不影响，就先放一样的程序码罗，之後再来调整。

• main.js
  加入

Vue.component('Navbar',require('./components/Navbar.vue').default);

• 新增Navbar.vue

<template>
  <div class="navbar">
      <nav class="navbar custom-nav fixed-top navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
 
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <router-link to="/" class="nav-link">Home</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/about" class="nav-link">About</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/products" class="nav-link">Products</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/news" class="nav-link">News</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/stores" class="nav-link">Stores</router-link>
            </li>
            </ul>
        </div>
    </nav>
  </div>
</template>
 
<script>
export default {
  name: 'Navbar',
  props: {
    msg: String
  },
}
</script>
 
<style scoped lang="scss">
  @media (min-width: 992px) { 
    .navbar.custom-nav{
      padding-top:16px;
      padding-bottom:16px;
      background-color: #7DA79D !important;
    }
   }
</style>

• 各分页都加入，增加导览列

<Navbar></Navbar>

弄完重启网站後就有浏览列罗
看看成果吧

明天来用首页的设计罗~~