概要

自分用の( ..)φメモメモ。
Vue.jsのCLIプロジェクトを新規に導入し、
且つBootstrap(正確にはBootstrapVue)と
fontawesome(正確にはVueFontawesome)を
利用可能とするときの手順。
必要最小限。testはMocha+Chaiとする。

Vue.jsはVue2.xとする（そろそろVue3.xへ移行すべきかもだが、調査時間が今は無いなので）。
@vue/cliはローカル導入とする。

※最新2022-03-19時点の操作手順は（@vue/cli のデフォルトがv2.xからv3.xに変更されている）「現時点2022/03月でVue.jsのv2.x系のCLIプロジェクト新規作成とBootstrapとfontawesomeを導入する手順メモ」を参照のこと。

backage.json

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
}

補足（ここでBootstrapとfontawesomeを選ぶ理由）

Bootstrapとfontawesomeを選んだ理由は、
ほぼ、私自身の好み。
強いて言えば「Vue.js以外でも使える（Vue.js利用者以外とも会話しやすい）」かな。

実際のところはBootstrapとFontAwesomeを直に使うわけではなく、
それぞれVue用のものを使うので、
本家の機能をそのままに使えるわけではないが、
そこまで使い込むわけでもないので、まぁそれは良いかな、と。

あと、２つ使う理由は、BootstrapVueだけだとアイコンのところが力不足に感じたこと（Bootstrap本家なら使えるアイコンがダメだったり）。
なので、アイコンならFontAwesomeだろ！ってことで組み合わせてみた。

手順のメモ

Vue/cliの（一時的）導入

以下のようにして、Vue-ClIをローカルに導入する。
本手順を最後まで終えたら、Vue-ClIはアンインストールしてもよい。
ここでは、package.jsonは作らない。

npm install @vue/cli
npx vue create cli-vue

Vue Cliのプロジェクトを作成

最初の選択肢は「Manually select features」を選択する。
これは、UnitTestを導入したいため。

続く設問は、Unit Testing を選択する。

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
>(*) Unit Testing
 ( ) E2E Testing

以降の設問は、デフォルトのまま進む。

Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x

Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

ここまででVue CLIの導入は完了。

BootStrap-Vueの導入

Vue CLIのプロジェクトのルートフォルダにて、以下のコマンドでインストールする。

cd vue-cli
npm install bootstrap-vue    --save

続いて、srcフォルダ直下にあるmain.jsを開いて、次の2行（本サンプルではコメント含めて4行）を追加する。

main.js

import Vue from 'vue'
import App from './App.vue'

// +++ add for bootstrap +++
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// -------------------------

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Vue-FontAwesomeの導入

Vue CLIのプロジェクトのルートフォルダにて、以下のコマンドでインストールする。

cd vue-cli
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/vue-fontawesome@latest

なお、最後の1行は、Vue 3.xの場合は
npm install --save @fortawesome/vue-fontawesome@prerelease
へ変更すること。

続いて、ルートにあるmain.jsを開いて、次の5行（本サンプルではコメント含めて6行）を追加する。

main.js

import Vue from 'vue'
import App from './App.vue'

// +++ add for bootstrap +++
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// -------------------------

// add for fontawesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { faEraser } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faEraser)
Vue.component('font-awesome-icon', FontAwesomeIcon)


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

ここで、「faEraser」の部分は、自身が使いたいFontAwesomeの
識別子を指定する。
複数なら「faEraser, faCoffee」のようにする。

アイコン識別子の検索は、フリーのSolidスタイルなら以下で出来る。
https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid

選んだ先で「Start Using This Icon」ボタン押下すると
「fa-eraser」や「fa-coffee」のように表示されるので、
このケバブケースをキャメルケース（ローワーキャメルケース）に
読み替えて指定する。

実際にアイコンを表示する場面では、例えば以下のように表記する。

<font-awesome-icon :icon="['fas', 'eraser']"></font-awesome-icon>

以上ー。

参考サイト

BootstrapVue > Getting Started
- https://bootstrap-vue.org/docs
vue-fontawesome
- https://github.com/FortAwesome/vue-fontawesome
How To Use Vue.js With Font Awesome
- https://blog.fontawesome.com/how-to-use-vue-js-with-font-awesome/