vue-devtools を使用して Vue を開発する

前書き:

Vue はデータ駆動型であるため、開発およびデバッグ中に DOM 構造を表示しても何も解析できないという問題があります。

しかし、vue-devtools プラグインを使用すると、データ構造を簡単に解析してデバッグできます。

1. Chrome 拡張機能をダウンロードします

GitHub のダウンロード アドレス:

依存関係パッケージに従って npm Taobao Mirror を使用することをお勧めします

Address:

npm Taobao Mirror をインストールするコマンド ライン:

$ npm -g cnpm をインストールします--registry=https://registry.npm.taobao.org

その後、npmの代わりにcnpmを使用して依存関係パッケージをインストールできます...。

2. cnpm install

ダウンロードが完了したら、コマンドライン cmd を開き、vue-devtools フォルダーに入り、依存関係パッケージに従って npm run build

3. シェル>chrome>src>manifest.jsonを開き、jsonファイルの「persistent」:falseをtrueに変更します

4. Chromeブラウザを開き、設定を開きます。 > または [プログラム] > [開発者モード] をクリックします

2 をクリックして解凍した拡張機能をロードし、shell>chrome フォルダーを

に置きます

最後に

vue で書かれたプロジェクトを開き、デバッグ ツールを開きますf12 を押して vue プロジェクトをデバッグします。

以上がvue-devtools を使用して Vue を開発するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。