WebGIS Element+Vue+OpenLayers の実際のプロジェクト
npm を使用して開発環境を構成する
開発がプロジェクト レベルの場合、npm を使用して開発環境を構成する必要があります。npm を使用した開発環境の構成には、
主に Vue、Element、OpenLayers のインストールが含まれます。
Vueのインストール
Vue をインストールする前に、まず、node.js と vue-cli をインストールする必要があります。1.node.js をインストールします
。node.js 公式 Web サイトからノードをダウンロードします。図 1-1 に示すように、LTS バージョン (長期安定バージョン) をダウンロードすることをお勧めします。
図 1-1 Node.js の公式 Web サイトから Node Vue をダウンロードする
Node Vue のインストールプロセスは非常に簡単で、[次へ] ボタンをクリックするだけです。インストールが完了したら、コマンド ライン ウィンドウでコマンドを実行します。
ノードのバージョンを確認できます。対応するバージョン番号がコマンド ライン ウィンドウに表示されれば、ノードのインストールが成功したことを意味します。
npm
これはnodeに統合されているnodeのパッケージマネージャーであり、nodeをインストールするとnpmが登場します。コマンド ライン ウィンドウでコマンドを直接実行します。npm
のバージョン番号が表示されます
。ここまでで、node の開発環境がインストールされ、npm も利用可能になります。一部の npm リソースがブロックされているか海外にあるため、npm が依存パッケージのインストールに失敗することがよくあります。そのため、npm の国内ミラーである cnpm も必要です。
コマンド ライン ウィンドウでコマンドを実行します。
エラーが報告されなければ、cnpm のインストールは成功です。コマンド ライン ウィンドウでコマンドを実行します。
図 1-4 に示すように、cnpm のバージョン番号を確認できます。
cnpm が正常にインストールされたら、cnpm を使用して依存パッケージをインストールできます。cnpm について詳しく知りたい場合は、TAONPM の公式 Web サイトを確認してください。次のインストールでは、インストール速度が遅すぎる場合は、npm を cnpm に変更できます。
vue-cli スキャフォールディング ビルド ツールをインストールする
コマンド ライン ウィンドウでコマンドを実行します。
図 1-5 に示すように、コマンド ライン ウィンドウにバージョン番号が表示されている場合は、vue-cli が正常にインストールされていることを意味します。上記のコマンドの V は大文字であることに注意してください。
図 1-5 は、コマンド ライン ウィンドウの Vue のバージョン番号を示しています。vue
-cli の 2.X バージョンでは、プロジェクトの作成にコマンド ライン ウィンドウのみを使用できます。まず、プロジェクトを作成する場所で Shift + 右マウス ボタンを押し、ポップアップ右クリック メニューで [ここでコマンド ライン ウィンドウを開く] オプションを選択し、コマンド ライン ウィンドウでコマンドを実行します。
firstApp は作成するフォルダーの名前です。最後に、必要に応じてコマンド ライン ウィンドウでプロジェクトを設定します。
vue-cli の 3.X バージョンでは、ビジュアル ページを使用してプロジェクトを作成し、コマンド ライン ウィンドウでコマンドを実行して
ビジュアル ページを開きます (図 1-6 を参照)。図 1-7 に示すように、視覚化ページを使用してプロジェクトを作成します。
図 1-6 視覚化ページを開くコマンド
図 1-7 ビジュアル ページを使用したプロジェクトの作成
vue-cli の 3.X バージョンでは、コマンド ライン ウィンドウを使用してプロジェクトを作成することもできますが、コマンド ライン ウィンドウでコマンドを実行するにはブリッジ ツールをインストールする必要があります。
できる
ブリッジツールをインストールする
。ブリッジ ツールが正常にインストールされたら、コマンド ライン ウィンドウでコマンドを実行します。
これでプロジェクトが作成されました。
正常に作成されたプロジェクトのディレクトリ構造を図 1-8 に示します。
図 1-8 では、node_modules フォルダーにプロジェクトの依存関係パッケージ ファイルが保存されています。package.json はプロジェクトの依存関係パッケージの構成ファイルであり、このファイルの「依存関係」キー (キー) に対応する値 (値) は、プロジェクト インポートされた外部ライブラリ ファイルを図 1-9 に示します。
図 1-9 プロジェクトによってインポートされた外部ライブラリ ファイル プロジェクトが
正常に作成されたら、エディターのターミナルまたはプロジェクトのルート ディレクトリでコマンド ライン ウィンドウを開いて、次のコマンドを実行できます。
来て
プロジェクトを実行する
。プロジェクトが正常に実行されると、IP アドレスが表示されます。この IP アドレスをブラウザに入力して、作成したプロジェクトを開きます。プロジェクトを開いたときの初期化ページは、図 1-10 に示されています。
図 1-10 プロジェクトを開いたときの初期化ページ
vue-cli スキャフォールディング ツールはグローバルにインストールする必要があることに注意してください。グローバル インストールとは、コンピューター上のどこからでも Vue にアクセスできることを意味します。ローカル インストールでは、ローカルの場所にある Vue にのみアクセスできます。グローバル インストールを示すには、コマンド ライン ウィンドウで「-g」を使用します。グローバル インストールを採用しているが、Vue にどこからもアクセスできない場合は、システム環境変数に「D:\nodejs\node-globalnpm」(自分のノードのインストール場所に応じて) を追加すると問題を解決できます。