Vue.jsのCLIプロジェクトを新規に導入＆Bootstrapとfontawesomeを利用可能とするときの手順メモ

# 概要

自分用の( ..)φメモメモ。
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を導入する手順メモ](https://qiita.com/hoshimado/items/6c37a623e86eaeab0d0f)」を参照のこと。


```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/