素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

投稿日: 2020年4月21日
最終更新日:

【ホストマシンを汚さずに】docker-composeでvue.jsプロジェクトの開発環境を構築する方法【Vue-CLI】

YouTubeも見てね♪

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/03/15 19:06:06時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,080 (2024/03/15 19:03:47時点 Amazon調べ-詳細)

翼を授けよう!

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,250 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥13,861 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥7,180 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

Vue-CLI+Quasar+Pugで静的サイトを作ってみる

フロントの技術はめまぐるしい変化を遂げてますが、最近はVue.jsに落ち着いた感が出てきている気がします。


The Progressive
JavaScript Framework
なぜ VUE.JS ? はじめる Vue.js

そこで、今回はVue.jsを使ったプロジェクトを作成するところまでを試してみようと思います♪

手順

Dockerfileの作成

まずは入れ物となるDockerfileを作成しましょう。

vue-cliさえ使えれば良いのでここでは特にモジュールは入れない事とします。

docker-compose.ymlの作成

次にdocker-compose.ymlを作成しましょう。

イメージのBuild

では、一旦ここまでの設定でDockerイメージをビルドしてみましょう。

ビルドが成功したのでコンテナを起動してみます。

正常にコンテナが起動しましたね♪

コンテナ内の作業

では、次はコンテナに入ってプロジェクトを整えていきましょう。

docker-compose exec app /bin/bashでコンテナの中に入りましょう。

Vue-CLIでプロジェクトを作成

まずはVue-CLIを使ってプロジェクトの雛壇を作成しましょう。

設定はよしなに選んでください。

動作確認

これでプロジェクトの雛壇は出来たので動作確認をしてみましょう。

作成したディレクトリに移動して、以下のコマンドで開発用サーバーを起動してください。

無事に起動しました。

CLIで生成されたディレクトリは以下の通りです。

が、ポート番号が8080となっており、docker-compose.ymlで開けたポートとズレちゃってますねorz

vue.config.jsで開発サーバーのポート番号を変更

vueプロジェクトの開発サーバーのポートはvue.config.jsを作成して設定を追加する事で変える事が出来ます。

確認

上記ファイルを作成したら再度起動してみてください。

起動ログも無事にポートが10080に変わっていますね!

ブラウザからlocalhost:18080/ にアクセスする事で正常に表示もされました♪

Quasarをインストール

次にVue.jsのデザインフレームワークのQuasarを追加しましょう。

自動変換をYにした場合は以下のように自動でQuasarの形式に変換されてます。

Pugの追加

次はPugの追加をしましょう。

HTMLのようなマークアップだと記述量が多くなってしまうので、階層化によって記述が出来るPugだと記述量が圧倒的に少なくなります

ただ、ESLintなどが対応していないなどのデメリットもあるのでお好みで導入してください。

今回は簡単なページを作るだけなのでESLintの懸念は一旦忘れて導入してみようと思います♪

追加は以下のコマンドで簡単に出来ます。

App.vueのHTML記法をPug記法に変換

次にApp.vueのHTML記述をPug記法に変換しましょう。

templateタグにlang=”pug”を追加するのを忘れずに。

確認

では、ここまでの修正を確認してみましょう。

正常に表示が出来ました♪

VSCodeのPrettierの設定

こちらの設定は好みによりますが、VSCodeの保存時の自動コードフォーマットを有効にしたい方は以下の記事を参考にして追加してみてください♪

終わりに

これでPug+Quasarを用いたVueプロジェクトの準備が出来ました。

Vue-CLIを使えばコマンドを打つだけでだいたい整える事が出来るので、ぜひ参考にしてみてください♪

CATEGORIES & TAGS

IT