概要
自分用の( ..)φメモメモ。
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を導入する手順メモ」を参照のこと。
"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行）を追加する。
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行）を追加する。
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
- vue-fontawesome
- How To Use Vue.js With Font Awesome