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

IT

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

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

「Abel ツ Channel」開設!٩(ツ)و

この度、YouTubeチャンネルを開設しました!

ブログと並行してのんびりゲーム実況やら色々な動画を投稿していこうと思うので、よろしければ、
ポチィ〜!
して頂けるとこれ幸いです!٩(ツ)و

スポンサーリンク

336×280




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を使えばコマンドを打つだけでだいたい整える事が出来るので、ぜひ参考にしてみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , ,

blogenist

Author: blogenist