アウトライン
Vueの中のJS APIの別の方法を開発するために使用することができ、この主流のフレームワークを反応し、角度の異なる方法でESRI-ローダーを見つけ、JavaScriptの公式ウェブサイト用のArcGIS APIを読んで、その動作今日の金利おもむくまま、参照パートナーを必要としている人々のために記録しました。あなたはVueの中で開発ESRI-ローダーJSのAPIを使用する方法を学びたいのであれば、反応し、角度は、この主流のフレームワークは、他の二つの記事に移動してください。
- 「[]のArcGIS JS API 4.14の使用の開発に特別なエピソードに反応」
- 「ArcGISのJS API 4.14の使用の開発でのVue】【特別なエピソード」
ステップ
1、インストール@のArcGIS / CLI足場
コマンドラインツールを開き、世界的に以下のコマンドで、@のArcGIS / CLI足場設置：
npm install -g @arcgis/cli
その後、我々は、関連するコマンドを使用してArcGISの異なるフレームワークに基づいて、JS APIのアプリケーションテンプレートを作成し、私たちの足場ツールのインストールが正常に終了し、上記のコマンドで見ることができます。
Vueの@のArcGIS /によってテンプレートベースのアプリケーションフレームワークを作成するための2、CLI足場ツール
JS APIの適切なディレクトリの場所に、次のコマンドを使用してテンプレートVueのフレームワークに基づいてアプリケーションを作成するために、2.1、：
arcgis create arcgis-vue-app -t vue
アプリケーションテンプレートを作成するには、上記のコマンドを入力すると、スケジュールは位置として来たときに我々が唯一の解決には、次の方法を使用できるように珍しく、その後、ソースNPMに切り替え淘宝網の源は仕事をしない、科学的な方法を介してインターネットには良いを遅くしないことがわかりました彼は王、喜喜を打ちます。
王の40分以上を再生した後、プログレスバーは、次のように私たちは、成功を作成するプロジェクトを待つので、もうすぐ終わりですが見つかりました：
2.2は、プロジェクトが正常に作成され、私たちは、プロジェクトのルートディレクトリに入り、次のコマンドで起動します。
npm run serve
2.3プロジェクトの開始が自動的にブラウザが開きます後、デフォルトのポートは8080で、その後、証明書の信頼の問題があるだろう、我々は唯一の信頼をクリックする必要があり、次のように、あなたが進むことができます：
上の図は、プロジェクトが正常に起動され、見ることができますが、マップは、それをインスタンス化し、7エラーがあるコンソールの外観を開きません。
私たちが作成したプロジェクトのルートディレクトリに戻って、この時間は、READMEファイルをお読みください。
文書で見ることができ、私たちのコマンドは、ローカルリソースの場合には、プログラムをローカルで実行され、このコマンドで起動するだけで必要な提供「NPMの実行がサーブ」、これだけ可能性がローカルにロードするリソースを与えられています我々が開始するための正しいコマンドで起動して、なぜ彼らは、エラーを見つけることができませんでした。
プロジェクトのルートディレクトリに2.4でプロジェクトを修正するために、次のコマンドを実行します。
npm start
この時点で、私たちのプロジェクトが正しく実行されて、見て、マップをインスタンス化し、伝説とビジネスコンポーネントの層を追加し、層は、マウスクリックのクエリ機能を識別することができなりました。
プロジェクトの成功の操作の後、我々は、コードの構造を見てください。
2.5、エディタ、ここで開いたVSコードと、アイテムコードで開かれ、次のように、コードの構造を見ることができます。
私たちは、私たちはこのプロジェクトは、プロジェクトを構築するための基盤となるのWebPACKに基づいてVueの、より正確なポイントのフレームワークに基づいて作成された、上記のコードの組織構造から見ることができます。{node_modules}ファイルディレクトリは、プラグインのインストールパッケージのプロジェクトの様々なタイプの下に格納されている場合、{公共}は、いくつかのテンプレートファイルを初期化するために私たちのメインページで下のファイルディレクトリに保存されている。いつものVUEのプロジェクトエンジニアリングと{SRC}ディレクトリ同様に、すべての私達のシステム内のコンポーネントコードのタイプ、作成<ヘッダ>ここでデフォルトと<WebMap>二つの成分、すなわち、プロジェクトページヘッドアセンブリとインスタンス化マップ成分; {試験}ディレクトリでここで便利な、組立、テスト<ヘッダ>のためではありません保存されている、いくつかのディレクトリのフォルダに加えて、だけでなく、アイテムの下Eslintルートプロファイル、プロファイルバベル、WebPACKのコンフィギュレーションファイル、これはそれはEslint、型WebGISの主流プロジェクトバベルこれらの主流のプラグインツールフレームワーク、現在活字体が完成主流を使用して、すべてのコードを書くためのフレームワークを使用したプロジェクトです。
2.6、ArcGISのJS APIを使用し、このプロジェクトは、参照先のアドレスは、公式ウェブサイトのアドレスで、最新バージョン4.14です。我々は、APIのオフライン版を使用している場合は、私たちは、次の書類を変更することで設定できます。
src/worker-config.ts
我々が開発した場合、我々は足場Vueのフレームワークベースのアプリケーションテンプレートを通過したこと、開発し、このプロジェクトにコードをカスタマイズするために変更することができます。テンプレートベースのアプリケーションフレームワークを構築する方法で、次の私たちの表情は、足場と反応します。
3、ベースのアプリケーションテンプレートを作成するには、CLIの足場ツールは、@のArcGIS /によってフレームワークに反応します
3.1、我々は、@のArcGIS / CLI足場インストールツールを持っているので、我々はちょうどテンプレートベースのアプリケーションフレームワークを作成する必要がある上に次のコマンドを使用して、適切なディレクトリに反応します：
arcgis create reactjsapi -t react
あなたがここにプロジェクトを作成するとき、我々は最初の王として、テンプレートベースのアプリケーションVueのコールを作成すると、進捗状況は、初めて私たちはネイティブキャッシュさで作成しているので、これは、非常に高速でありますそう、その後速くなります作成しました。
3.2、そしてここでは、次のコマンドを使用してプロジェクトを開始し、ルートディレクトリに良いプロジェクトを作成するために、我々は再起動コマンドが間違っを避けるために、READMEファイルでプロジェクトを開始する前に、最初の読み取りであります：
npm start
以上の結果から見ることができ、それはまた、テンプレートベースのアプリケーションフレームワークをREACT作成し、また、ベース・マップとビジネス層をインスタンス化し、そして伝説のコンポーネントを追加し、マウスクリックのクエリ機能をオープンしました。
3.3は、あなたが見ることができるコードエディタでプロジェクトを開き、コードの構造テンプレートベースのアプリケーションフレームワークとそのコードの組織構造が類似したVueの作成、構築されたテンプレートベースのアプリケーションフレームワークであるが反応により、srcディレクトリ内のファイルをindex.tsxすることができますTSX JSXは、以下のように書くことが文法の変異体を使用して、決定します。
3.4同様に、我々は次のディレクトリに変更される可能性があり、アドレスJSのAPIリファレンスを変更する場合：
src/worker-config.ts
これらは、私たちは足場によって作成プロセスフレームワークベースのアプリケーションテンプレート反応します。フォローアップの要求がある場合、あなたは直接このテンプレートの基礎をカスタマイズするためにコードを変更することができます。
概要
導入によって、@のArcGIS / CLI足場をインストールする方法についてのこの記事では、Vueのに基づいてどのように作成すると、使用テンプレートは足場で主流の枠組みの中でのJavaScriptのためのアプリケーション開発のArcGIS APIの別の方法を紹介するためのフレームワークを反応します。「使用[評価] @のArcGIS / CLIの足場とESRI-ローダの方法のArcGIS JS API - 詳細は別記事を参照するために、以前の方法ESRI-ローダーと比較して、この開発アプローチは、それは、独自の長所も短所があります評価の開発。 "
