vue.js 開発ツールをインストールするにはどうすればよいですか?

インストール方法: 1. zip インストール パッケージをダウンロードし、指定したフォルダーに解凍します; 2. Vue-devtools ディレクトリに入り、「yarn install」および「yarn run build」と入力してインストールします; 3. 設定manifest.json ファイル; 4. Chrome プラグインを手動で拡張します。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。

vue devtools の概要

vue devtools は、Vue.js アプリケーションをデバッグするための Chrome ブラウザーに基づくプラグインです。開発者はデバッグ効率を大幅に向上させます。ユーザーによる DOM 構造データ構造の解析とデバッグをサポートします。

vue はデータ駆動型であるため、開発時やデバッグ時に DOM 構造を確認しても何も解析できないという問題がありましたが、このプラグインを使用することで、ユーザーはデータ構造を簡単に解析してデバッグすることができます。サイドバー ペインのページでコードを確認し、デバッグします。状態、変更、アクションなどの情報を簡単に表示でき、ルーティングの変更、ルーティング関連情報などを記録することもできます。フロントエンド開発には必須のツールと言われています！

Vue-Devtools のインストール

#1. Vue 公式 Web サイト https://cn.vuejs.org/ にアクセスします。エコシステム内で [Devtools

##2] をクリックします。ページが GitHub にジャンプし、クリックして zip パッケージをダウンロードします。

# 3. ダウンロード後、フォルダーに解凍します。私が作成したフォルダー

4 に解凍します。次に、Vue-devtools-dev ディレクトリに入ります。 Shift キーを押したまま右クリックして PowerShell ウィンドウを開きます

##5. 「yarn install」と入力してインストールを開始します。すでにここにインストールしているので、ここではインストールしません。画像を貼り付けて

#6 し、「yarn run build」と入力し、インストールを待ちます。次のページが表示され、インストールは成功します。

7 を開きます。フォルダーに移動して \vue-devtools-dev\packages \shell-chrome ディレクトリに入り、manifest.json ファイルを開き、

"persistent": false を "persistent": true

# に変更します。
8. Google Chrome を開き、拡張機能を入力し、開発者モードを開き、クリックして解凍した拡張機能をロードし、\vue-devtools-dev\packages\ ディレクトリ内の Shell-Chrome フォルダーを選択します

#9. インストールが完了しました

Vue-devtools を使用してデバッグします

1. ブラウザでデバッグ プロジェクトを開きます。ここでテスト ページを作成し、コンソールを開いて、図内の Vue をクリックしてデバッグします。

## 関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年の最新 5 つの vue。js ビデオ チュートリアルの選択

プログラミング関連の知識の詳細については、プログラミング入門

をご覧ください。 ！

以上がvue.js 開発ツールをインストールするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。