・vue.js 環境構築 【Mac版】
【１】
Node.jsをインストール
自分のPCにNode.jsがインストールされているか確認。
ターミナルを開いて、下記コマンドを実行。
$ 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コマンドが利用できるようになります。
$ 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プロジェクトファイルを作りたいディレクトリに移動してから、下記のコマンドを実行します。
$ vue create vue-todo
インストール時、質問されるので、下記を選択ください。
(十字キーで選択してEnter)
? Please pick a preset: default (babel, eslint)
Babelとは、Vueで利用される新しい記述を古い記述に変換してくれるツールです。例えばWindowsのインターネットエクスプローラーというブラウザは、新しい記述を正しく認識してくれないため、古い記述方法に変換する必要があり、その変換の役割を担ってくれるのがBabelです。
ESLintとは、コード検証ツールで、皆さんが書いたコードの誤りを指摘してくれる優れものです。
無事プロジェクト作成できたら、下記コマンドでプロジェクトの存在を確認→vue-questディレクトリに移動してから、サーバを起動しましょう。
$ ls
$ cd vue-TODO
$ ls
$ npm run serve
起動を確認したら、http://localhost:8080/ にアクセスして、Vue.jsのトップページが表示されることを確認してください。
【4】
Vuetifyの導入
Vuetifyとは、Vue.jsで使えるコンポーネント（アプリを構成する部品）をあらかじめ用意してくれるライブラリです。つまり、自分で部品を作らなくても、Vuetifyが綺麗なパーツを提供してくれるということです。
導入を進めていきましょう。
サーバが立ち上がっているターミナルのウインドウは、そのまま残しておきましょう。別途もう一つターミナルを立ち上げ、vue-todoディレクトリに移動してください。
そして、次のコマンドを打ちます。
$ vue add vuetify
インストール時、複数質問されるので、下記を選択ください。
※下記の通り実行しないと、動作が上手くいかない場合がありますので、お気をつけください。
? 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タグの下に、srcディレクトリの中身のファイル群が入ってくる形となります。
・babel.config.js
新しい記法のコードを古い記法に書き換えるツールを利用するための、設定ファイルです。
・package-lock.json package.json
プロジェクトの設計書となるようなファイル。どんなパッケージがインストールされているか、
ご自身のプロジェクトのパッケージ情報を確認することができます。
・単一ファイルコンポーネントについて
ひとつのファイルで、下記の機能をすべて混ぜ合わせた部品として扱うことが可能です。
上記でも書いた通り、ひとつのファイルを何度も再利用できるのが特徴です。
・HTML
・JavaScript
・CSS
単一ファイルコンポーネントの構成は、
下記のような３つのブロック構成になり、HTMLから順番に記述していく、シンプルな形です。
<template>
<!-- ここに、HTMLを記述します -->
</template>
<script>
// ここに、JavaScriptを記述します
</script>
<style>
/* ここに、CSSを記述します */
</style>
・vue.jsを読み込む
読み込む方法は複数ある。
今回は、CDNで読み込んでみましょう。
https://jp.vuejs.org/v2/guide/index.html
上記URLから
下記コードをHTMLに貼り付ける。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>