Node.jsモックデータレイヤーでVue.js環境モードを使用する方法
著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。
序章
ソフトウェア開発に関しては、スタックの両端があります。 スタックは、ソフトウェアが機能するために使用されるテクノロジーのコレクションです。 プログレッシブユーザーインターフェイスフレームワークであるVue.jsは、ユーザーが直接対話するスタックの一部であるフロントエンドの一部です。 このフロントエンドはクライアントとも呼ばれ、ユーザーのブラウザでレンダリングされるすべてのものを網羅しています。 HTML 、 JavaScript 、CSSなどのテクノロジーはすべてクライアントでレンダリングされます。 対照的に、バックエンドは通常、 Java 、 Kotlin 、.NETなどのテクノロジーを介してデータまたはサーバーと対話します。
アプリケーションはデータ自体であり、インターフェイス(フロントエンド)は、ユーザーが対話できるようにユーザーにとって意味のあるデータを表示する方法です。 ソフトウェア開発の初期段階では、開始するためにバックエンドは必要ありません。 場合によっては、バックエンドがまだ作成されていないこともあります。 このような場合、独自のローカルデータを作成してインターフェイスを構築できます。 Node 環境と変数を使用して、環境ごとに異なるデータセットを切り替えたり、ネットワーク呼び出しを介してローカルデータと「ライブ」データを切り替えたりできます。 モックデータレイヤーがあると、バックエンドの準備が整う前にフロントエンドをテストするためのデータが提供されるため、まだデータがない場合に便利です。
このチュートリアルの終わりまでに、いくつかのノード環境を作成し、これらのデータセットをノード環境変数で切り替えました。 これらの概念を説明するために、環境全体でこのデータを視覚化するためのVueコンポーネントをいくつか作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- コンピューターにインストールされているNode.jsバージョン
10.6.0
以降。 これをmacOSまたはUbuntu18.04にインストールするには、macOSで Node.jsをインストールしてローカル開発環境を作成する方法、またはNode.jsをインストールする方法のPPAを使用してインストールするセクションの手順に従います。 Ubuntu18.04で。 - Vue CLIがマシンにインストールされ、新しいプロジェクトが生成されます。 これを取得するには、 VueCLIを使用してVue.jsシングルページアプリを生成する方法のステップ1および2に従ってください。
- また、JavaScript、HTML、およびCSSの基本的な知識も必要です。これは、 HTMLを使用してWebサイトを構築する方法シリーズ、CSSを使用してWebサイトを構築する方法シリーズにあります。 、およびJavaScriptでコーディングする方法。
ステップ1—モードを使用した環境の作成
Vue CLIプロジェクトに関しては、モードは重要な概念です。 mode は、環境タイプ、またはビルド中にロードされる変数のセットです。 これらの変数は、プロジェクトのルートディレクトリにある.env
ファイルに保存されます。 デフォルトのvue-cli-service
プラグインの一部として、すぐに3つのモードにアクセスできます。 これらは:
development
:vue-cli-service serve
が実行されるときに使用されます。test
:vue-cli-service test:unit
が実行されるときに使用されます。production
:vue-cli-service build
およびvue-cli-service test:e2e
が実行されるときに使用されます。
おそらく最もよく使われるモードはdevelopment
モードです。 これは、Vue.js開発者がローカルマシンでアプリケーションを操作するときに使用するモードです。 このモードでは、ホットモジュールのリロード(ブラウザーの即時更新)が有効になっているローカルノードサーバーが起動します。 一方、test
モードは、単体テストを実行するためのモードです。 単体テストは、アプリケーションのメソッド、イベント、場合によってはユーザーの操作をテストするJavaScript関数です。 最後のデフォルトモードはproduction
です。 これにより、すべてのコードが圧縮され、パフォーマンスが最適化されるため、本番サーバーでホストできます。
Vue CLI から生成されたプロジェクトには、これらのコマンドがnpm run serve
、npm run test:unit
、およびnpm run build
に事前にマッピングされています。
各環境は、独自の.env
ファイルに関連付けられています。このファイルには、アプリケーションが参照できるカスタムノード環境のキーと値のペアを配置できます。 CLIからプロジェクトを生成した後はこれらのファイルはありませんが、ターミナルで1つのコマンドを使用してこれらのファイルを追加できます。
ここで、開発環境ファイルを生成します。このファイルは、チュートリアルの後半で使用します。 ターミナルを開き、プロジェクトのルートディレクトリに次のように入力します。
- touch .env.development
選択したテキストエディタで、新しく作成したファイルを開きます。 このファイルでは、環境タイプを明示的に定義する必要があります。 これは、任意のキーと値のペアです。 ただし、.env
ファイルの名前に対応する環境タイプを定義することをお勧めします。
このNODE_ENV
は、ビルド時に選択した環境またはモードに応じて異なるデータセットをロードすることにより、チュートリアルの後半で使用します。 次の行を追加します。
NODE_ENV="development"
ファイルを保存して終了します。
このファイルのキーと値のペアは、アプリケーションが開発モードの場合にのみプログラムに影響します。 [X11X]