現時点2022/03月でVue.jsのv2.x系のCLIプロジェクト新規作成とBootstrapとfontawesomeを導入する手順メモ

# 概要

* 自分用のφ（．　．）メモメモ。
* 下記の記事（2021-06-05）で書いた内容のアップデート版。
    * [Vue.jsのCLIプロジェクトを新規に導入＆Bootstrapとfontawesomeを利用可能とするときの手順メモ](https://qiita.com/hoshimado/items/bfe56274bee2df0e71b0)
* 上記の記事（2021-06-05）の時点と比較して、Vue.jsのデフォルトが v2.x から v3.x に変わったたため、現時点（2022-03-19）での手順として記載する
    * なお、後述する理由によりVue.js v2.x を対象とする
* UIコントロールとアイコンは、BootStrapとFontawesomeを用いる


## ライブラリ構成と選定理由など

* Vue.js v2.x系とする
    * v3.x系は、現時点ではBootStrapVueとfontawesomeの対応がα～β版のため
        * 「`Early (but lovely) implementation of Vue 3, Bootstrap 5 and Typescript`」とのこと
            * https://www.npmjs.com/package/bootstrap-vue-3
        * 「`Vue 3 is just around the corner!`」とのこと
            * https://github.com/FortAwesome/vue-fontawesome#readme
* UnitTestは、Mocha + Chai を採用する
    * 理由は、「私自身の好み」だから
        * 強いて言うなら、Mocha は実装側のフレームワークに依存せず利用できるテストフレームワークだから
    * Vue.js v3.xならば Jest を採用するのがベターかもしれないが、v2.x 系の利用において今から Jest を新規学習するコストは見合わない、と考える
* ボタンなどのコントロールUIには、Bootstrapを採用する
    * 正確には、Vue.js向けにカスタムされたBootStrapVueを用いる
    * 理由は、「私自身の好み」だから（元記事と変わらず）
    * https://bootstrap-vue.org/docs
* アイコンには、fontawesomeを採用する
    * BootStrapでもアイコンは提供されているが、BootStrapVue側への移植が不十分と感じられる
    * アイコンに特化した fontawesome が、好みのアイコンが見つかりやすい
    * でも一番の理由は、「私自身の好み」だから（元記事と変わらず）
* Production版での動作確認には簡易HTTPサーバーの「`http-server`」を用いる
    * Vue CLIで出力されるProduction版のhtmlファイル（とjsとcss）が、どのバージョン以降かは不明だが「 `file://` 」での表示には未対応になった様子
        * おそらく、「 `<script type="module">` 」でのロードに切り替わった事が理由と思われるが、「デフォルトをこちらに切り替えた」の記載は見つけられず（どこかにはあるんだろうけど・・・）
            * https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode 辺り？？？
    * このため、Build（トランスパイル）実行後のファイルの動作検証にhttpサーバーが必要となったので導入する


## フォルダ構成について

リポジトリの直下に以下の二つのフォルダを配置する構成とする。

* 「Vue.jsのプロジェクト名」
    * ここに、Vue.jsのファイルを格納する
    * 以降では「cli-vue」としてフォルダ名称を置く。適宜読替のこと
* public
    * Vue CLIで作成したProduction版ファイルの出力先
    * 簡易HTTPサーバーである「`http-server`」が表示する対象フォルダ
    * 公開時は、この`public`フォルダ配下を、静的Httpサーバー（で意図伝わるかな？）にアップロードする想定


## バージョンなど

* "@vue/cli": "^5.0.3", [^1]
* "vue": "^2.6.14"
* "core-js": "^3.8.3",

* "bootstrap-vue": "^2.21.2",

* "@fortawesome/fontawesome-svg-core": "^6.1.1",
* "@fortawesome/free-solid-svg-icons": "^6.1.1",
* "@fortawesome/vue-fontawesome": "^2.0.6",

* "http-server": "^14.1.0"

[^1]: node-ipcに悪意のあるコードが含まれた件への対応版（該当するnode-ipcを含まない版）である5.0.1→5.0.3以降へ変更 - https://github.com/vuejs/vue-cli/releases/v5.0.3

# 手順のメモ

## Vue CLIの導入（と確認用簡易HTTPサーバーの導入）

以下のようにして、Vue CLIと、確認用の簡易HTTPサーバーをインストールする。

先ずは、適当にpackage.json を作成。入力内容は好きに。`entry point`も現状はデフォルトのままでOKかな（今回はExpress.jsを使う予定ないし、AzureにHTTPサーバーごと置くわけでも無いので）

```cmd
npm init
```

続いてVue.jsと、ローカル検証用の簡易HTTPサーバーをインストールする。
ローカルインストールする理由は、「他の環境で、GitHubなどから取得した時に `npm i` （略せずに記せば `npm install` ）すれば、同様の開発環境を再現可能とする」ことが目的。

また、Vue CLI自体を利用するのは開発環境のみなので、「`--save`」ではなく「`--save-dev`」とする。

```cmd
npm install   @vue/cli   --save-dev
npm install   http-server --save-dev
```


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

次に、Vue CLI環境を作成する（先の節で記載の通り、Vue CLIのプロジェクト名は「`vue-cli`」とする）。

```cmd
npx vue   create   cli-vue
```

以下のように、作成するVue CLI環境についての質問事項が出るので答えていく。
**次の個所のみ変更**し、それ以外はデフォルトのまま進める。

* Please pick a preset: (Use arrow keys)
    * Manually select features を選択（他には、Default ([Vue 3] babel, eslint)、Default ([Vue 2] babel, eslint)があり、前者がデフォルトになっている）
* Check the features needed for your project
    * Unit Testing を追加
* Choose a version of Vue.js that you want to start the project with
    * 2.x を選択（デフォルトは 3.x になっている）
* Pick a unit testing solution:
    * Mocha + Chai を選択（デフォルトは Jest になっている）

具体的な表示例と選択例は以下。

```
Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
  Manually select features
```


```
Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to togg
le all, <i> to invert selection, and <enter> to proceed)
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
>(*) Unit Testing
 ( ) E2E Testing
```


```
Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Choose a version of Vue.js that you want to start the project with (Use arrow key
s)
  3.x
> 2.x
```


```
Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
```


```
Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> t
o invert selection, and <enter> to proceed)
>(*) Lint on save
 ( ) Lint and fix on commit
```


```
Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
  Jest
> Mocha + Chai
```


```
Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
```


```
Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config
files
? Save this as a preset for future projects? (y/N)
```
ここの選択は Yes/No好きに（今後も同じ選択を流用するなら、Yes入力しておくと、選択パターンを名前を付けて保存でき、次回以降は冒頭でそれを選ぶことが出来るようになる）。

Vue CLIのフォルダに移動して、デフォルトのサンプルコードが動作することを確認する。

```cmd
cd cli-vue
npm run serve
```

ビルドが終わるのを待って、ブラウザで `http://127.0.0.1:8080` へアクセスし、Vue.jsのサンプルページが表示されることを確認する。

続いて、Build設定ファイルを構成する。
具体的には、Vue CLIのプロジェクトフォルダのルート（上述の `npm run serve` したフォルダ）に `vue.config.js` ファイルがあるので開き（無ければ新規作成し）、以下の内容に書き換える。

```vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  outputDir : '../public',
  transpileDependencies: true
})
```

この状態で、以下のコマンドを実行してBuildする。

```
npm run build
```

Buildが完了すると、Vue CLIのプロジェクトフォルダと同一階層（つまり上位の直下）に、「`public`」フォルダが作成されて、Production版ファイルが出力されている。上位フォルダに移動して、`http-server`を起動する

```cmd
cd ..
npx http-server
```

Webブラウザで「`http://127.0.0.1:8080`」へアクセスすると、先の出力先のフォルダ「`public`」を表示されることを確認する（先の `npm run serve` で表示確認した内容と同一になる）。

HTTPサーバーを停止するには「ctrl + C」をコマンドライン上で押下する。
Production版のビルドと表示の確認を終えたら、Vue CLIのプロジェクトフォルダに戻っておく。

```cmd
cd cli-vue
```

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


## BootStrap-Vueの導入

Vue CLIのプロジェクトのルートフォルダにて（さきほど `npm run serve` したフォルダ）、以下のコマンドでインストールする。

```
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')

```

これにより、例えば以下のようにすることで、BootStrapのUIコントロールが利用可能となる。

```vue
    <b-button @click="openDialogOk" class="m-2" variant="primary">
        OKダイアログを表示
    </b-button>
// 中略
import { BButton } from 'bootstrap-vue';
// 中略
    components: {
        BButton
    },
// 中略
    methods : {
        openDialogOk : function () {
            // ボタンが押下された際の処理を記載
        },
```

## Vue-FontAwesomeの導入

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

```cmd
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/vue-fontawesome@latest
```

※Vue.js v3.xを利用の場合は最後の1行が変更となるが、本記事はv2.xが対象なので割愛。

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

```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, faCog } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faEraser)
library.add(faCog)
Vue.component('font-awesome-icon', FontAwesomeIcon)
// -------------------------


Vue.config.productionTip = false

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

ここで、「faEraser」の部分は、自身が使いたいFontAwesomeの
識別子を指定する。
複数なら「faEraser, faCog」のようにする。
（eraserは消しゴムアイコンで、cogは設定／歯車アイコン）

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

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

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

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

以上ー。



# 参考サイト

* Vue.js
    * https://jp.vuejs.org/index.html - ※v2.x向け
    * https://cli.vuejs.org/guide/
* 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/