Vue CLI を使ってみた

はじめに

恥ずかしながら Vue.js を使ったことがなく、本当に簡単に使うだけなら CDN 使ってちょこちょこ使えばよかったのでしょうが、それなりに使いこなすとなると Vue CLI を使った方が便利そうだったので、はじめの一歩として Vue CLI を使ってみました。

インストール

npm が使える環境であれば、下記でインストール可能です。
ちなみに、自分は Mac 環境です。

% npm install -g @vue/cli

動作確認

簡単に動作を確認してみました。

プロジェクト作成

下記のようにプロジェクトを作成すると、カレントディレクトリに test4 ディレクトリが作成され、その下に各種ファイルが配置されます。

% vue create test4

エラーが出た場合

自分の場合は、プロジェクト作成でエラーが出ました。
結構ずらずらといろいろ出ましたが、先頭は下記のエラーでした。

ERROR:root:code for hash md5 was not found.

自分の場合は python をインストールし直すことで解消しました。

さらに、下記のエラーが出ました。

gyp: No Xcode or CLT version detected!

どうやら Xcode のバージョンがあっていないようなので、以下のように Xcode を入れ直したところ解消しました。

% sudo rm -rf $(xcode-select -print-path)
% sudo rm -rf /Library/Developer/CommandLineTools
% xcode-select --install

サーバ起動

作成したプロジェクトに移動して、サーバを起動します。

% cd test4
% npm run serve

デフォルトでは、http://localhost:8080/ にアクセスするとサンプルページが表示できます。

$HOST

環境変数 $HOST が設定されていると、$HOST を host としてサーバを起動する仕様になっています。
従って、$HOSTが意図しない設定になっているとトラブルになります。
ちなみに、私の場合は $HOST は普通に Mac の hostname になっていたのですが、名前解決できない状態になっていたので、アクセスができない状態（なぜか起動はしているが、Listen できていない状態。bind できない状態だけど起動した？）になっていました。

vue.config.js

プロジェクトディレクトリの直下に vue.config.js を作成すると、そこで各種設定を行うことができます。
設定例：

module.exports = {
    devServer: {
        host: 'localhost',
        port: 9876,
        disableHostCheck: true,
    },
};

ただ、注意点としては、上記では host 指定がありますが、この指定よりも環境変数 $HOST の指定の方が強いので、$HOST が設定されている場合には設定は上書きされてしまいます。