使用 vue.js 也引用 bootstrap 和 FontAwsome

 克服忘性用的筆記

 工作環境：
    Windows 10
        Node 18
            vue.js
            bootstrap
            FontAwsome

已經安裝 node 18 和 vue.js 想在開發時也使用 bootstrap 和 FontAwsome ，

    npm install bootstrap

 bootstrap 好像會用到所以還是裝了

    npm install --save @popperjs/core

 裝 FontAwsome

    npm i --save @fortawesome/fontawesome-svg-core
    npm i --save @fortawesome/free-solid-svg-icons

 檢查 dependencies (package.json)看起來像醬子：

  "dependencies": {

    "@fortawesome/fontawesome-svg-core": "^6.3.0",

    "@fortawesome/free-solid-svg-icons": "^6.3.0",

    "@fortawesome/vue-fontawesome": "^3.0.0-5",

    "@popperjs/core": "^2.11.6",

    "bootstrap": "^5.3.0-alpha1",

    "vue": "^3.2.45"

  },

  引用套件(main.js)看起來像醬子：

import 'bootstrap/dist/css/bootstrap.min.css'

import "bootstrap"

import { library } from '@fortawesome/fontawesome-svg-core'

import { faPhone } from '@fortawesome/free-solid-svg-icons'

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faPhone)

createApp(App)

    .component('font-awesome-icon', FontAwesomeIcon)

    .mount('#app')

 試一下(Vue.app)：

    <div class="container">

      <div class="row">

        <div class="p-5 mb-4 bg-light rounded-3">

          <h1 class="display-5 fw-bold">This is about bootstrap 5</h1>

          <p class="col-md-8 fs-4">using bootstrap utilities....</p>

          <button class="btn btn-primary btn-lg">Call<font-awesome-icon icon="phone" /></button>

        </div>

      </div>

    </div>

     npm run dev

 看到 bootstrap 的形式的內容和電話的圖示 

 

 收工！