Vue Element フロントエンドアプリケーション開発開発環境の準備

概要

これまで、VSはさまざまなフロントエンドおよびバックエンド開発に使用されてきました。プロジェクトの必要に応じて、純粋なフロントエンド開発モデルを徐々に統合しています。BSフロントエンド開発では、主にVue + Elementを選択し始めました。将来的には、2つの異なるインターフェースフレームワークを表示する方法として、Vue + AntDesignインターフェースキットをさらに統合する予定です。 Vue + Element を使用したフロントエンド開発では、以前の開発モデルからの大きな転換が必要であり、より関連性の高い知識に触れる必要があります。この一連のエッセイは、段階的な学習と研究のアプローチに基づいています。Vue + Element を使用したフロントエンド開発のあらゆる側面を完全に紹介し、BS フロントエンドの既存のフレームワーク機能を組み合わせて 2 つを統合します。本稿では、主に開発環境の準備について紹介し、関連する開発ツールやプラグイン支援などを準備する必要があること、開発保存の自動修正処理、デバッグ構成内容などについて説明します。

1. 必要なソフトウェア環境を開発する

以前の Asp.net 開発とは異なり、純粋なフロントエンド開発では、一般的に、フロントエンド開発用のかさばる VS は使用されなくなり、代わりに VS Code や WebStorm などの軽量開発ツールを使用してフロントエンド コードを開発および保守します。軽量開発ツールですが、その機能も非常に強力であり、開発環境は Windows システムや Mac システムなど上に配置できるため、マルチプラットフォーム開発環境を実現できます。

1) VSコードのインストール

VS Code (Visual Studio Code) は、Microsoft が開発した無料のオープン ソースのクロスプラットフォーム テキスト (コード) エディターです。ほぼ完璧なエディター。

公式サイト: https://code.visualstudio.com

ドキュメント: https://code.visualstudio.com/docs

ソースコード: https://github.com/Microsoft/vscode

VS Code のインターフェースは、おおよそ以下のようになります。通常、インストール後、インターフェースが英語の場合は、中国語パッケージをインストールできます。

VS Code をインストールした後、通常は開発を支援するために必要なプラグインを検索してインストールする必要があります。プラグインのインストールは非常に簡単です。検索パネルで見つけたら、直接インストールできます。

通常、次の vs code プラグインをインストールする必要があります。

ヴェトゥル

Vue の多機能統合プラグインには、構文の強調表示、スマート プロンプト、emmet、エラー プロンプト、書式設定、自動補完、デバッガーが含まれます。 Vue 開発者にとって必須の、vscode 用の公式 Vue プラグインです。

ESLint

ESLint は、文法規則とコード スタイルをチェックするツールであり、文法的に正しく、スタイルが一貫したコードが記述されていることを確認するために使用できます。

VSCode の ESLint プラグインは ESLint の機能を直接統合しており、インストール後に使用できます。コード形式や仕様の詳細もカスタマイズでき、チームで同じ設定ファイルを共有できるため、チーム全員が書いたコードは同じコード仕様を使用でき、コードをチェックインする前に全員が独自のコード仕様チェックを完了できます。

VS Code - Chrome用デバッガー Chromeでデバッグするためのプラグイン

このツールはフロントエンド開発に不可欠であり、開発およびデバッグモードを大きく変えるでしょう。

これまで、フロントエンドのデバッグは主に JavaScript のデバッグでした。Chrome コンソールで対応するコード部分を見つけ、ブレークポイントを追加し、Chrome コンソールをステップ実行して値の変化を確認する必要がありました。

Chrome 用デバッガーを使用した後、Chrome でコードを実行しているときに、VSCode で直接ブレークポイントを追加できます。[実行] をクリックすると、Chrome のページが引き続き実行されます。VSCode で追加したブレークポイントに到達すると、VSCode で直接シングルステップ デバッグを実行できます。

美しくする

Beautify プラグインは、コードをすばやくフォーマットして、コードを書くときに乱雑なコード構造を瞬時に非常に規則的なものにすることができます。これは、コード強迫性障害を持つ人にとっては必須のものです。コード フォーマットが優れていると、後でメンテナンスしたり、他の人が読んだりするときに非常に便利です。

2) ノード開発環境をインストールする

VS Code で開発する場合、関連モジュールをインストールするためにコマンドライン npm を使用する必要があることがよくあります。これらには node 環境のサポートが必要です。node をインストールすると、npm も一緒にインストールされます。

Node ダウンロード: https://nodejs.org/en/

インストール後、コマンドラインまたはVS Codeのシェルからnodeとnpmのバージョン番号を確認できます。

ノード -v

npm -v

3) Vue 足場の設置

Vue (発音は /vjuː/、view に似ています) は、ユーザー インターフェイスを構築するためのプログレッシブ フレームワークです。

グローバルにインストール:

vue-cli をインストールします。

グローバルアンインストール:

npm アンインストール vue-cli -g

4) Vue DevTool Chromeプラグインのインストール

このプラグインもVueの開発には必須のChromeプラグインです。通常、外部ネットワークがないので、Chromeプラグイン公式サイトから直接インストールすることはできません。GitHub経由でダウンロードしてコンパイルするのはインストールが面倒です。その後、ウェブサイトでダウンロードしてインストールに成功しました。

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

2. 開発環境の構成と使用

Vetur などの自動コード修正処理は、VS Code の [ファイル] [環境設定] [設定] で設定し、Settings.json をクリックして編集する必要があります。

ここでは主に、保存後のコードのインデントとタイプセットの一般的な処理を設定します。

Chrome で VScode をデバッグするには、Chrome 用デバッガー プラグインをインストールし、Vue プロジェクト コードを設定する必要があります。

プロジェクトのルートディレクトリにあるVue.Config.jsファイルを開き、以下に示すようにproductionSourceMap:trueとdevtool:'source-map'を適切な場所に追加します。

次に、実行パネルで、デバッグパラメータを以下のように設定します。

これらの設定を指定したら、VS Code のデバッグ モードでコードをデバッグできます。コードでは、オブジェクトのデータを追跡するために、対応するブレークポイントを設定するだけです。

デバッグする前に、必ず npm run dev を使用してプロジェクトを開始してください。プロジェクトが完全に開始されると、プロジェクト アドレスが Chrome ブラウザで開かれ、F5 を使用してプロジェクト コードをデバッグします。

Vue DevTools は、Vue プロジェクトのルーティング、ステータス、その他の情報を追跡するためにも使用され、情報を非常に適切に追跡および処理できます。

Chrome ブラウザで Vue DevTools アイコンを点灯させるには、Vue プロジェクトの main.js にコード行を追加します。

次のインターフェースに示すように、Vue.config.devtools=process.env.NODE_ENV==='development'

このエッセイは簡単な入門編です。主にVS Code環境のインストール、対応するプラグインの設定、Chromeと連携してプロジェクトコードをデバッグする方法を紹介します。

以上が、Vue Element フロントエンドアプリケーション開発の開発環境の準備作業の詳細な内容です。Vue Element フロントエンドアプリケーション開発の開発環境の準備作業の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。