Vue

【Vue.js 2.9】はじめてのVue.js プロジェクト作成からWelcomeページの表示

・はじめてVue.jsを使う場合のやり方
・Welcomeページを表示するまで紹介

はじめに

Vue.jsの学習がここから始まります。
今回ははじめてVue.jsを触るためHello Worldを表示するところまでの紹介となります。

【Vue.js 2.9】DockerでVue.jsをインストールしたらエラー発生 ・Vue.jsをDockerにインストール時のエラー内容紹介・エラー解決方法の紹介 はじめに Railsの学習も一区切り付...

環境構築と環境情報

環境はDockerを利用しています。
Dockerでの環境構築は別記事を参考ください。

【Vue.js 2.9】Vue.js CLI の環境構築(Dockerとdocker-compose使用) ・Dockerを使ったVue.jsの環境構築の紹介 はじめに Railsの学習も一区切り付いたのでVue.jsの学習を始め...

環境構築後各種バージョンは下記となります。

ツールバージョン
Node.js16.9.1
Vue.js2.9.6
npm7.24.0

Vue.jsプロジェクト作成

Vue.jsプロジェクトには新規作成か更新によって違いますが今回は新規作成の紹介です。
下記コマンドを実行してしてください。

vue init webpack

コマンドを実行すると「Y/n」の選択肢が表示されますが「Y」を入力してエンターキーを押してください。
その後はプロジェクト名とプロジェクトの説明を設定してください。
「Author」の箇所は空の状態でエンターキーを押してください。

今回は基本デフォルトとYesを選び、テストの部分だけはNoを選択しています。

全てを選択後、少しするとVue.jsプロジェクトが作成されます。

hostの変更

プロジェクト作成後npmを実行すれば動くのですが、docker環境下では動きません。Railsでもあった問題ですね。

「config/index.js」にあるhostを「0.0.0.0」に変更します。

host: '0.0.0.0', // can be overwritten by process.env.HOST

npm実行

hostを変更したらnpmの実行です。
ターミナルから「npm run dev」コマンドでnpmを実行します。

少し待つとターミナルの内容が切り替わりアクセス先URLが表示されれば確認出来ます。
今回、hostを変更しているのでアクセス先URLは「http://0.0.0.0:8080」となります。

確認

あとはブラウザでの確認のみです。
上記画像のURLをCtrl+左クリックするとWelcomeページが表示されます。

URL「http://localhost:8080/」を直接ブラウザに入力しても表示されます。

参考記事

docker-composeでシンプルにvue.js環境構築
https://qiita.com/A-Kira/items/ed12de84dda0230a4eae