・はじめてVue.jsを使う場合のやり方
・Welcomeページを表示するまで紹介
はじめに
Vue.jsの学習がここから始まります。
今回ははじめてVue.jsを触るためHello Worldを表示するところまでの紹介となります。
環境構築と環境情報
環境はDockerを利用しています。
Dockerでの環境構築は別記事を参考ください。
環境構築後各種バージョンは下記となります。
| ツール | バージョン |
|---|---|
| Node.js | 16.9.1 |
| Vue.js | 2.9.6 |
| npm | 7.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
