vue.jsにFont AwesomeとChart.jsとBootstrap4を導入してみた

18278 ワード
vue-cli chart.js Vue.js FontAwesome 初心者 初心者 テキストリンク

はじめに

vue.jsのアウトプットの一環としてポートフォリオサイトを作りました。
その際に躓いた、

  • vue.jsにFont Awesomeを導入
  • vue.jsにChart.jsの導入
  • vue.jsにBootstrap4の導入

主にこちらについてのお話です。

準備

LaravelでJavascriptやCSSを使おう( Laravel Mix )
こちらの記事を参考にしてnode.jsをインストールしておきましょう。

目次

  1. vue-cliのインストール
  2. 新規vue.jsプロジェクトの立ち上げ
  3. Font Awesome for vue.jsのインストールと使用方法
  4. Chart.js for vue.jsのインストールと使用方法
  5. Bootstrap4 for vue.jsのインストールと使用方法

1. vue-cliのインストール

そもそもvue-cliって何？

VUE CLI は webpack 4 の上に構築された事前設定済みのビルド設定を提供します。 ( 公式ドキュメントより )

つまりvue-cilとは、vue.js用の雛形作成ツール。
vue.jsでプロジェクトを立ち上げようとしたときにスターターキットにして用意してくれます。

って事でインストールです。
ターミナルを開いて、

npm install -g @vue/cli

こちらのコマンドを実行してください。

次に、

vue --version

このコマンドでインストールが成功したか確認します。

実際の画面です。
このようにバージョンが表示されていれば成功です。

2. 新規vue.jsプロジェクトの立ち上げ

プロジェクトを作りたいフォルダの中に移動して、

vue create <プロジェクト名>

こちらのコマンドで作成です。

なお、上記のコマンドを実行すると

このような画面が出てきますが今回はdefaultの状態にしエンターキーを押してください。
( ↑↓キーで移動できます。`)

完了したら以下のような画面になっているはずです。

cd <プロジェクト名>

で立ち上げたプロジェクトのディレクトリの中に入ってください。

今回使うエディタはvscodeです。

code .

コマンドで今いるディレクトリをvscodeで開きましょう。
( もしcodeコマンドが使えない場合
=> 【Visual Studio Code】コマンドからVS Codeを起動できない場合 (Mac編) )

これでいよいよFontAwesomeを導入する準備ができました。

3. Font Awesome for vue.jsのインストールと使用方法

まずは公式GitHubにいきます。

Installationの欄をみてみると、

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome

このコマンドを打てとあるので、一行ずつ実行してください。
三行一気にではありません。
( $マークは実際には打たないので消しました。 )

次に、より多くのアイコンを使えるように、

npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

こちらのコマンドを一行ずつ実行してください。
これでインストールは完了です。

次に、vscodeでsrc/main.jsを開いてください。
そこに、

src/main.js
import Vue from 'vue'
import App from './App.vue'

// 追加
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)
library.add(fas, far, fab)
// 追加ここまで

Vue.config.productionTip = false

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

上記のように書いてください。

次にsrc/App.vueを開いて<template>タグ内に、

src/App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!-- twitterアイコン -->
    <font-awesome-icon :icon="['fab','twitter']" class="text-light"/>
    <!-- qiitaアイコン -->
    <font-awesome-layers>
      <font-awesome-icon :icon="['fas','square']" class="text-light"/>
      <font-awesome-icon :icon="['fas','search']" transform="shrink-1" :style="{ color: 'black' }" />
    </font-awesome-layers>
  </div>
</template>

これでFontAwesomeが使えているはずです。

npm run serve

コマンドを入力して、
localhost:8001にアクセスしてください。
以下のようになったら成功です。

なおQIITAのアイコンはFont Awesomeにはないので、
Font Awesome で Qiitaロゴっぽいアイコンを表現
こちらの記事を参考に作りました。

4. Chart.js for vue.jsのインストールと使用方法

まずは公式ドキュメントを見にいきます。

npm install vue-chartjs chart.js --save

コマンドでインストールできるようですので実行してください。
今回はsrc/components/内にDoughnatChart.vueファイルを作りました。

DoughnatChart.vue
<script>
import { Doughnut } from 'vue-chartjs'
export default {
  extends: Doughnut,
  props: {
    chartdata: {
      type: Object,
      default: null
    }
  },
  data: () => ({
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: false,
      tooltips: {
        enabled: false
      },
      hover: {
        mode: null
      }
    }
  }),
  mounted() {
    this.renderChart(this.chartdata, this.options)
  }
}
</script>

次に、src/App.vueです。

src/App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!-- twitterアイコン -->
    <font-awesome-icon :icon="['fab','twitter']" class="text-dark"/>
    <!-- qiitaアイコン -->
    <font-awesome-layers>
      <font-awesome-icon :icon="['fas','square']" class="text-dark"/>
      <font-awesome-icon :icon="['fas','search']" transform="shrink-1" :style="{ color: 'white' }" />
    </font-awesome-layers>
    <!-- doughnatchart -->
    <doughnut :chartdata="{datasets: [{backgroundColor:['coral','gray'], data: [75, 25]}]}" class="doughnat"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// 追加
import Doughnut from './components/DoughnutChart.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    // 追加
    Doughnut
  }
}

<script>タグ内を変更し、<template>タグに追記してください。

npm run serve

コマンドでサーバーを立ち上げ確認しましょう。

無事にChart.jsを導入できましたか？

5. Bootstrap4 for vue.jsのインストールと使用方法

まずは公式ドキュメントです。

vue add bootstrap-vue

コマンドでインストールできると書いてあるので実行しましょう。

これでBootstrap4は導入完了です。
試しにsrc/App.vueファイルを開いて、

<!-- twitterアイコン -->
<font-awesome-icon :icon="['fab','twitter']" class="text-success"/>

class="text-sccess"に変更してみましょう。

twitterのマークが緑色になりました！

ちなみに

今回作ったサイトはこちらです。