Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@hoshimado(ほしまど（旧：淡幻星）)

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

Last updated at Posted at 2022-03-19

概要

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

  • Vue.js v2.x系とする
  • 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"> 」でのロードに切り替わった事が理由と思われるが、「デフォルトをこちらに切り替えた」の記載は見つけられず（どこかにはあるんだろうけど・・・）
    • このため、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"

手順のメモ

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>

以上ー。

参考サイト

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?