はじめに
恥ずかしながら 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 が設定されている場合には設定は上書きされてしまいます。
コメント