VueCLIで作成したプロジェクトにライブラリを追加する方法

#### 前回までのあらすじ

`npm install`と`vue create`のコマンドをターミナルで打つことでVueCLIプロジェクトを作成。またプロジェクトフォルダの直下に`vue.config.js`フォルダを作成して中身を記述することでCloud9上でプレビューができるようになった。

## VueCLIで作成したプロジェクトにライブラリを追加

##### 今回インストールしたいライブラリはこちら！

- tailwindcss：CSSのフレームワーク
- daisyUI：tailwindcssをベースとしたコンポーネントライブラリ
- tabler-icons：アイコンのライブラリ
- axios：データをサーバからフェッチするリクエストを行うことができるライブラリ

フレームワークとライブラリの違いは、骨組みか部品かということ。
例えば車だったら、**車の骨組み**（車体があって、エンジンがあって、ハンドルがあって、タイヤがあってなどの設計図）がフレームワークで、**車の部品**（タイヤ、エンジン、ハンドルなどの部品）がライブラリである。

インストールしたいのがフレームワークなのか、ライブラリなのかで設定のややこしさが変わってくるから、ここから先はそれを頭に入れてやっていこう！

## tailwindcssをインストールしてみよう

tailwindのインストール方法は、tailwindcssの公式サイトに載っている。
https://tailwindcss.com/docs/installation/using-postcss

#### インストール方法の選定

今回は**tailwindcssをPostCSSのプラグインとしてインストール**するという方法を採用します。理由は公式サイトに以下のように書いてあるから、

*Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.*
(tailwindcssをPostCSSのプラグインとしてインストールすることは、ビルドツールと一体化させるのに最も滑らかな方法だ。)

**「ちょまって、PostCSSってなんや？」**
PostCSSとはCSSファイルを操作してくれるJavaScriptベースのプラグインのこと。
PostCSSとはその名の通り、CSSの後（post）ってことで、CSSファイルに対して後付けで色々処理を行なってくれる。だからポストプロセッサーと呼ばれる。反対にプリ(pre)プロセッサーもあって、コンパイルよりも前に処理するものである。

ややこし、、焼肉で考えてみよっか。
「生肉→**七輪で焼く**→焼けた肉→**タレをつける**→タレをつけた肉」
プリプロセッサーは七輪でやく。ポストプロセッサー（PostCSS）はタレをつける。
ってとこだろうか。

#### インストール手順

前述の通りtailwindcssをpostcssのプラグインとしてインストールする。

（１）tailwindcssとpostcssとautoprefixerをインストールする。
```
npm install -D tailwindcss@^3.2.4 postcss@^8.4.19 autoprefixer@^9
```
（２）プロジェクト直下に**postcss.config.jsファイル**を作成する。

中身は以下のように記述する。ここではpostCSSのプラグインとしてtailwindcssとautoprefixerを設定している。tailwindcssの欄にはtailwind.config.jsファイルを参照するようにと記述。
(※autoprefixorは、CSSの比較的新しいプロパティを各ブラウザに対応させる記述であるベンダープレフィックスを必要に応じて追加してくれるよ。)
```
module.exports = {
  plugins: {
    tailwindcss: {
      config: './tailwind.config.js'
    },
    autoprefixer: {},
  }
}
```

（３）tailwindcssの設定ファイルであるtailwind.config.jsファイルも作成する。
ここではどのファイルにtailwindcssを適応したいか、読み込んでほしいかを決めているよ。
どこにtailwindつけたい？どこで読み込んでほしい？ここではsrcフォルダ下の全てのvueやjsの拡張子がついたファイルに読み込んでいるよ。
（※./src/＊＊/＊.{vue, js}を分解してみてみると、src/**はsrcフォルダかの全てのファイル、*.{vue,js}はvueやjsを持つ全てのファイルとなる。だからsrcフォルダの全てのファイルの中から、vueやjsの拡張子を持つ全てのファイルを指定していることになる）
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
（４）cssファイルを作って、main.jsで読み込む。
srcフォルダ下に新しく作成したapp.cssファイルに以下のコードを追加。
ここではtailwindで使うスタイルを整えるコードなどを読み込んでいる。
するとtailwindcssがプロジェクトのCSSとして設定される。
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

main.jsファイルでapp.cssを読み込む。
```
import Vue from 'vue';
import App from './App.vue';
import './app.css'; // この行を追記

Vue.config.productionTip = false;

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

これでTailwindCSSをプロジェクトに追加できました。
これでもう使えるようになっているはず！

## daisyUIをインストールしてみよう

このdaisyUIはtailwindcssをベースとしたライブラリなので、tailwindcss同様にsrcフォルダ下の全てのvueやjsファイルに適応したい。

インストール
```
npm install daisyui@^2.40.1
```

tailwind.config.jsファイルのプラグインとして設定
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")], // この行を変更
}
```

これで完了！

## tabler-iconsをインストールしてみよう
インストール
```
npm install vue-tabler-icons@^1.0
```

使いたいところでimportして、コンポーネント登録して、使う
```
<template>
  <div>
    <button class="btn btn-sm btn-outline btn-success book-registration__show-btn">
      <bookmark-icon class="mr-1.5"></bookmark-icon>書籍の登録 //③使う
    </button>
  </div>
</template>

<script>
import { BookmarkIcon } from 'vue-tabler-icons'; //①importする

export default {
  components: { BookmarkIcon }, //②vue-tableのコンポーネントを登録する
};
</script>

<style scoped>
.book-registration__show-btn {
  padding-right: 1.2rem;
}
</style>

```
完了

## axiosをインストールしてみよう

インストール
```
npm install axios
```

importして使う
```
import axios from 'axios'; //①importする

export const getBooks = async () => {
  const { data } = await axios.get('/books'); //②使う
  return data;
};

export const postBook = (title, image) => axios.post('/books', { title, image }); //②使う
```

## まとめ

VueCLIで作成したプロジェクトにフレームワークやライブラリを追加していきました。
フレームワークであるtailwindcssだけ設定が面倒でした。

手順は簡単にまとめると、、

**tailwindは、**
npm install
↓
postcss.config.jsファイルにて、tailwindcssとautoprefixorをプラグインとして設定
↓
tailwind.config.jsファイルにて、tailwindcssをどこに適応したいのか設定
↓
app.cssファイルにて、tailwindのスタイルを読み込む。main.jsでimportする。

**daisyUIは、**
npm install
↓
tailwind.config.jsにて、プラグインとして設定

**tabler iconsは、**
npm install
↓
import, component追加、使用

**axiosは、**
npm install
↓
import,使用

つまりはフレームワークでもライブラリでも、
「インストール→設定→使用」という流れは変わらず、
設定のところがややこしかったたりするけど、
調べれば出てくるはずだから、
頑張ろうってこと。