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

19967 ワード

FontAwesome Vue.js Bootstrap vue-cli bootstrapVue Bootstrap テキストリンク

概要

自分用のφ（．　．）メモメモ。
下記の記事（2021-06-05）で書いた内容のアップデート版。
- Vue.jsのCLIプロジェクトを新規に導入＆Bootstrapとfontawesomeを利用可能とするときの手順メモ
上記の記事（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", ¹
"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"

手順のメモ

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

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

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

npm init

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

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

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

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

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

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のフォルダに移動して、デフォルトのサンプルコードが動作することを確認する。

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を起動する

cd ..
npx http-server

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

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

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コントロールが利用可能となる。

    <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のプロジェクトのルートフォルダにて、以下のコマンドでインストールする。

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」のように表示されるので、
このケバブケースをキャメルケース（ローワーキャメルケース）に
読み替えて指定する。

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

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

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

Author And Source

この問題について(現時点2022/03月でVue.jsのv2.x系のCLIプロジェクト新規作成とBootstrapとfontawesomeを導入する手順メモ), 我々は、より多くの情報をここで見つけました https://qiita.com/hoshimado/items/6c37a623e86eaeab0d0f

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .