Day 06：小孩子才做选择－BootstrapVue 全部引入

本篇开始终於要进入解决需求的前置作业了！首先需要让网站有个基本的置顶导览列，让我们有请 BootstrapVue 出场～直接交给 BootstrapVue 帮你处理好 RWD（Responsive Web Design）响应式网页设计、甚至是 ARIA（Accessible Rich Internet Applications）无障碍网页体验。

BootstrapVue 是基於 Bootstrap v4 及 Vue 2 的整合套件，在 Getting Started 有清楚列出相依的工具和版本。

（图片来源：截自 BootstrapVue - Docs - Getting Started）

起初我是以平常安装套件的方式，直接手动安装 npm install bootstrap-vue bootstrap，此时要特别留意版本问题，由於目前 Bootstrap 已发展到 v5.1，因此需指定安装「npm install [email protected]」才能正常执行 BootstrapVue。

vue add：在已建立好的专案额外安装 plugins

後来发现也可以直接透过 Vue CLI 指令「vue add bootstrap-vue」快速安装 BootstrapVue。

（图片来源：截自 BootstrapVue - Docs - Vue CLI 3 plugin）

执行指令後选择相关设定。

安装完成後，package.json 会更新安装项目，绿色区段代表新加入的资源，蓝色区段代表更新版本的资源。

BootstrapVue 全部引入

另外，专案中也会自动新增 plugins 资料夹，之前有介绍过该资料夹是用来存放 Vue 相关的插件，因此 bootstrap-vue.js 会被归档在此，并且已写入将资源「全部引入」的程序码。

import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);

同时，在 main.js 里也已经自动 import plugins 资料夹中的 bootstrap-vue.js，相当於在安装完成後送给你一个可以直接开发的状态，因为有了全部 BootstrapVue 的功能和样式，所以无论引入任何元件都能轻松上手、快速使用。

那麽接下来就只需要到 BootstrapVue 挑选家俱（components）来布置你的家（homepage）罗！

引入 Navbar

1. 首先，在 Components 资料夹中新增一个 Navbar.vue 档案，接着前往 BootstrapVue 官网元件区的 Navbar 分页，复制文件中的范例程序码，贴到刚才新增的 Navbar.vue 里，删去目前不需要的部分（例如 Disabled 项目和 User 下拉选单）。

2. 由於 Navbar 属於每个页面都存有的共通元件，因此直接将其引入至 App.vue 统一渲染所有页面，省去重复在每个页面各别引入 Navbar 的过程。

   import Navbar from "@/components/Navbar";
   export default {
     components: {
       Navbar,
     },
   };
   

3. 最後在 App.vue 的 <template> 中使用 Navbar 元件，并将 Navbar 放在公版 <div id="nav"> 的上方

   <template>
     <div id="app">
       <Navbar />
       <div id="nav">
         <router-link to="/">Home</router-link> |
         <router-link to="/about">About</router-link>
       </div>
       <router-view />
     </div>
   </template>
   

回到浏览器观察，我们的 Navbar 成功渲染到页面上啦！

参考资料

• Vue CLI - Plugins and Presets
• BootstrapVue - Docs
• BootstrapVue - Components - Navbar