用Vue & Firebase 實作簡易購物網站 03.用Bootstrap 4 做導覽列

※成品連結：vue-shop-3b5cc.web.app

03.用Bootstrap 4 做導覽列

一、前置作業：

(一)安裝Bootstrap 4、jQuery、popper.js

1.安裝指令

npm install bootstrap jquery popper.js --save

2.程式碼

(1)assets資料夾->新增app.scss，加上：

@import '~bootstrap/scss/bootstrap';

(2)於main.js加上：

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery
import 'popper.js'
import 'bootstrap'
import './assets/app.scss'

(二)調整App.vue，並引入中文字型

1.App.vue程式碼內容：

2.參考資料：可參考下方網站自行依網頁風格引入其它字體。

(1) Google Fonts 線上字體推出 5 款免費的中文網頁字型：http://www.flycan.com/article/css/google-fonts-webfont-2474.html

(2) Google Fonts 首頁：https://fonts.google.com/

二、準備分頁(About.vue、News.vue、Products.vue、Stores.vue)

(一)程式碼

1.views資料夾->新增About.vue、News.vue、Products.vue、Stores.vue

2.於router.js加上：

3.About.vue、News.vue、Products.vue、Stores.vue程式碼內容(內容可以自行設計)

(1)About.vue

(2)News.vue

(3)Products.vue

(4)Stores.vue

三、設計導覽列(Navbar.vue)

(一)程式碼

1.components資料夾->新增Navbar.vue

2.於main.js加上：

// 可於各檔案加入
Vue.component('Navbar',require('./components/Navbar.vue').default);

3.views資料夾->Home.vue、About.vue、News.vue、Products.vue、Stores.vue加入Navbar.vue內容

4.Navbar.vue程式碼內容

※補充：<router-link>類似帶連結的<a>標籤，通過 to 指定目標位置。

(二)參考資料

1.Bootstrap 4 Navigation：https://getbootstrap.com/docs/4.0/components/navbar/

2.<router-link>官方文件：https://router.vuejs.org/zh/api/#router-link

返回文章列表➯