vue.js 開発環境構築

・vue.js　環境構築　【Mac版】

【１】
Node.jsをインストール
自分のPCにNode.jsがインストールされているか確認。
ターミナルを開いて、下記コマンドを実行。

```Terminal:Terminal
$ node -v
$ npm -v

```
上記のコマンドで、それぞれのバージョンが表示されればOK。
基本的に、Node.jsがインストールされていれば、NPMもインストールされているはずです。
↓Node.jsのインストール（macOS版）まだの方。
https://prog-8.com/docs/nodejs-env

【２】
Vue CLI のインストール
CLIとは、
https://wa3.i-3-i.info/word13118.html

VueCLIとは、Vueを使うための便利な機能がパッケージされているツール群です。

下記コマンドでPC全体でVueコマンドが利用できるようになります。

```Terminal:Terminal
$ npm install -g @vue/cli@4.4.6
パーミッションエラーが発生したら、下記のコマンドで再実行してください。

パーミッションエラーが出る場合
$ npm install -g @vue/cli@4.4.6

インストールが完了したら、下記できちんとインストールできているか、バージョン確認を行いましょう。

$ npm install -g @vue/cli@4.4.6
これで、インストールしたVueCLIのバージョンが表示されれば、インストール完了です。

```
【３】
Vueプロジェクト作成

Vueの新規プロジェクトをつくっていきましょう！

まず、Vueプロジェクトファイルを作りたいディレクトリに移動してから、下記のコマンドを実行します。

```Terminal:Terminal
$ vue create vue-todo

インストール時、質問されるので、下記を選択ください。
(十字キーで選択してEnter)
? Please pick a preset: default (babel, eslint)

```

Babelとは、Vueで利用される新しい記述を古い記述に変換してくれるツールです。例えばWindowsのインターネットエクスプローラーというブラウザは、新しい記述を正しく認識してくれないため、古い記述方法に変換する必要があり、その変換の役割を担ってくれるのがBabelです。

ESLintとは、コード検証ツールで、皆さんが書いたコードの誤りを指摘してくれる優れものです。

無事プロジェクト作成できたら、下記コマンドでプロジェクトの存在を確認→vue-questディレクトリに移動してから、サーバを起動しましょう。

```Terminal:Terminal
$ ls
$ cd vue-TODO
$ ls
$ npm run serve

```

起動を確認したら、http://localhost:8080/ にアクセスして、Vue.jsのトップページが表示されることを確認してください。

【4】
Vuetifyの導入

Vuetifyとは、Vue.jsで使えるコンポーネント（アプリを構成する部品）をあらかじめ用意してくれるライブラリです。つまり、自分で部品を作らなくても、Vuetifyが綺麗なパーツを提供してくれるということです。

導入を進めていきましょう。

サーバが立ち上がっているターミナルのウインドウは、そのまま残しておきましょう。別途もう一つターミナルを立ち上げ、vue-todoディレクトリに移動してください。

そして、次のコマンドを打ちます。

```Terminal:Terminal
$ vue add vuetify

```

インストール時、複数質問されるので、下記を選択ください。

※下記の通り実行しないと、動作が上手くいかない場合がありますので、お気をつけください。

```Terminal:Terminal
? Still proceed? Yes
? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? Yes
? Use custom properties (CSS variables)? Yes
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? No
? Use babel/polyfill? Yes
? Select locale (Use arrow keys) English

```

<主要な選択肢の解説>
・pre-made template → Vueプロジェクトのトップページを書き換えるかどうか
・custom theme → プロジェクトのテーマ色などを変更するかどうか
・icon → 使うアイコンの種類を選択
・babel/polyfill → コードの記法・関数・ライブラリの変換を行うツールを使うかどうか
・locale → 言語を選択
インストール後、http://localhost:8080/　のトップページが、Vuetify仕様に変わっていることを確認して下さい。

ホットモジュールリプレースメント（ブラウザの更新を行わなくても自動的にコード変更を検知してくれる便利な処理）が効いていれば、自動で表示が切り替わるはずです。

・ディレクトリ解説
　開発に移る前に、VueCLIプロジェクトのディレクトリ構成を学んでいきましょう。

　・node_modules
　　パッケージをインストールした際に、
　　パッケージ群が入ってくる場所。原則自分では触らないと覚えておきましょう。

　・src
　　開発中に、主に書き換えたり、書き加えたりしていくファイル群をいれておく場所。
　　効率的な読み込み処理を行うため、デプロイする際には、
　　srcディレクトリの中のファイルは圧縮（ミニファイ化）されます。

・src > main.js
　このファイルが、index.htmlに埋め込まれる形となります。

　・public
　　srcディレクトリとは対照的に、このディレクトリの下に置かれたファイルは圧縮（ミニファイ化）されません。
　　画像ファイルなど圧縮したくないファイルを入れておく場所です。

・public > index.html
　プロジェクトの読み込みの起点となるファイル。

　<div id="app"></div>
　デプロイ時には、このdivタグの下に、srcディレクトリの中身のファイル群が入ってくる形となります。

　・babel.config.js
　　新しい記法のコードを古い記法に書き換えるツールを利用するための、設定ファイルです。

　・package-lock.json package.json
　　プロジェクトの設計書となるようなファイル。どんなパッケージがインストールされているか、
　　ご自身のプロジェクトのパッケージ情報を確認することができます。

・単一ファイルコンポーネントについて
　ひとつのファイルで、下記の機能をすべて混ぜ合わせた部品として扱うことが可能です。
　上記でも書いた通り、ひとつのファイルを何度も再利用できるのが特徴です。
　・HTML
　・JavaScript
　・CSS
　単一ファイルコンポーネントの構成は、
　下記のような３つのブロック構成になり、HTMLから順番に記述していく、シンプルな形です。

```vuejs:uniq.vue.js
<template>
  <!-- ここに、HTMLを記述します -->
</template>

<script>
  // ここに、JavaScriptを記述します
</script>

<style>
  /* ここに、CSSを記述します */
</style>


```
































・vue.jsを読み込む
　読み込む方法は複数ある。
　今回は、CDNで読み込んでみましょう。
 https://jp.vuejs.org/v2/guide/index.html
 上記URLから
 下記コードをHTMLに貼り付ける。

```html:uniq.html

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

```















```Terminal:Terminal


```


```html:uniq.html



```


```css:uniq.css



```


```vue:uniq.vue.js



```