CLIを使用して、Vue.jsのアプリケーション開発環境を作成する方法を記載しています。CLIを使うことで、簡単にVue.jsのプロジェクトを作成することが可能です。今回はDocker環境でVue.jsのプロジェクトを立ち上げてみます。使用しているツールのバージョンはそれぞれ下記になります。3.2.1目次Vue.jsのDocker環境を準備する作成した環境を起動する作成した環境を停止するVue.jsのプロジェクトを作成する動作を確認するVue.jsのDocker環境を準備するdocker-compose.ymlとDockerfileを書いて、Vue.jsが動作する環境を作成します。Desktopを入れていない場合は、先に導入してください。今回は.vue_v3_dockerというディレクトリを作成して下記のように配置しました。docker-compose.ymlは下記のように作成しました。CLIで作成したプロジェクトを実行した際のポートは8080なので、下記のようにポート設定をしています。trueDockerfileは下記のように準備しました。CLIをインストールするようにしました。0.0.0.0作成した環境を起動する作成した環境を起動する場合は、下記のコマンドを使用して起動します。.vue_v3_dockerを配置したディレクトリ配下で実行してください。-d-fオプションで、ファイルを指定しています。-dを指定することで、バックグラウンドで起動してくれます。初回起動後は、下記のようにインストールが走って、起動が完了します。Started作成した環境を停止する起動した環境を止めるときは、下記のコマンドで止めることができます。down停止すると、下記のように止まったことが確認できます。Removed環境を停止した後に、再起動する場合は先ほどのコマンドを使用します。一度コンテナを作成しているので、次回からは起動が早く済みます。-dVue.jsのプロジェクトを作成する環境を起動した後に、Vue.jsプロジェクトを作成します。先ほど作成した環境を立ち上げた後に、下記コマンドを使用して、Dockerコンテナに入ります。shコマンドを実行すると、下記のようにコンテナ内に移ります。CLIを使用して、プロジェクトを作成します。[プロジェクト名]」でプロジェクトの作成ができます。今回はfirst-appという名前でプロジェクトを作成しました。first-app実行するとVue3かVue2、もしくは手動でプロジェクトを作成するかを聞かれます。features今回はVue3を選択しました。YarnかNPMではNPMを選択しました。NPM少し待つと、プロジェクトの作成が完了して、下記のメッセージが表示されます。serve動作を確認する作成したプロジェクトを起動して、ブラウザからVue.jsのWelcome画面を表示してみます。Dockerコンテナに入っていない場合はコンテナに入ります。shコンテナに入った後は、作成したプロジェクトのディレクトリ配下に移動します。first-app下記コマンドで作成したVue.jsのプロジェクトを起動します。serve起動が完了すると、ターミナルは下記のような状態になって、起動していることが確認できます。//Vue.js記事一覧へdockerVue.jsプログラミングシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクGit【現役エンジニアが選定】Gitの学習におすすめの本4選!Gitを学習するときにおすすめの本を4つ紹介しています。Gitについて簡単に解説しています。その後に、Gitを学習する時におすすめの本を紹介しています。最後にそれぞれの本を、ターミナル(CUI)・SorceTree(GUI)のどちらの...Python【Python入門】for文の使い方!繰り返し(ループ)処理を行う!Pythonでfor文を使って、処理を繰り返す方法について書いています。最初にfor文の説明を簡単にして、実際のコードを元に解説しています。for文の処理をスキップするcontinueや、処理を抜けるbreakについても記載しています。載せ...swiftSwiftで数値から文字列に変換する2つの方法!Swiftで数値から文字列に変換する方法について書いています。数値から文字列に変換するにはStringを使うか、文字列に埋め込むことで変換可能です。サンプルコードは、Swiftバージョン5.7で検証しています。Stringを使って数値から文...PHPPHPのSplFileObjectでファイル読み込み!(テキスト・CSV)PHPでSplFileObjectを使って、ファイルを読み込む方法について書いています。最初にSplFileObjectクラスについて簡単に解説しています。その後にテキストファイルとCSVファイルを読み込んで、挙動を確認してみました。結合など)C#で配列を使うときの操作をまとめました。サンプルコードには.NET6(C#バージョン10)を使っています。それでは、詳しく確認していきましょう。statusの使い方について書いています。statusについて解説して、その後に実際にコマンドを使用した際の出力を載せています。Gitのバージョン2.32.0を使って、動作を確認しています。st...Python【Python入門】比較演算子について!サンプルコード6つ!Pythonの比較演算子をまとめてみました。最初にそれぞれの比較演算子について解説して、最後に全ての比較演算子を表にまとめています。載せているソースコードはPythonのバージョン3.11.0で確認しました。公式のこちらに値の比較についての...PHP【PHP入門】比較演算子の使い方!サンプルコード7選!PHPの比較演算子の使い方について書いています。それぞれの比較演算子について、サンプルコードを用意して動作を確認してみました。載せているサンプルコードについては、PHPのバージョン8.1.8を使って検証しています。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。目次Vue.jsのDocker環境を準備する作成した環境を起動する作成した環境を停止するVue.jsのプロジェクトを作成する動作を確認するVue.jsの学習におすすめの本を選定!【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。Vue.jsの学習に本が必要?Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに使われ...codelikes.com2022.10.23JavaScriptの学習におすすめの本を選定!【現役エンジニアが選定】JavaScriptの学習におすすめの本5選JavaScriptの学習におすすめの本を選定してみました。最初にJavaScriptはどんなものかと、学習に本が必要かを考えて書いてみました。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。