Web Components Ignite UI CLI
CLI ツールでは、Ignite UI for Web Components の定義済みのプロジェクト テンプレートが含まれ、アプリ開発を効率的に行うことができます。Ignite UI CLI は、さまざまなフレームワーク用のアプリケーションを作成およびスキャフォールディングするためのスタンドアロン コマンドラインツールです。
作業の開始
まずは CLI をインストールします。
npm install -g igniteui-cli
上記のインストール コマンドは、Ignite UI CLI を Ignite UI for Web Components アプリケーションの作成、スキャフォールディング、および実行に使用できるようにします。
新しいプロジェクトの作成
Ignite UI CLI を使用して、Ignite UI for Web Components コントロールを使用するように構成されたアプリケーションを作成するには、コマンドラインで次のテンプレートを使用できます。
ig new "[name_of_project]" --framework=[target_framework]
上記のテンプレートを使用して、「My Project」という名前の Web Components アプリケーションを作成する場合は、次のコマンドを実行します。
ig new "My Project" --framework=webcomponents
コンポーネントの追加
プロジェクトの作成後は、いつでも ig add を使用してコンポーネント テンプレートを追加することができます。パラメーターを指定せずにこのコマンドを実行した場合、キーボードナビゲーション CLI を使用して、選択したコントロールを追加することにより、使用可能なテンプレートが示されます。
ig add
または、単に ig list コマンドを実行して、現在のプロジェクトでサポートされているテンプレートの完全なリストを取得することもできます。
ig list
ig list を実行し、追加したいコンポーネント テンプレートを見つけた後、コマンドラインでこのテンプレートを実行することにより、すばやく追加することができます。
ig add [component_template] [component_name]
上記の「component_template」は通常、Ignite UI for Web Components コンポーネント (grid、category-chart、linear-gauge など) と一致します。
たとえば、「MyGridComponent」という名前のデータ グリッド テンプレート コンポーネントをアプリに追加する場合は、次のコマンドを実行します。
ig add grid MyGridComponent
現在、CLI は次の Web コンポーネントで使用できます。
名 | コンポーネント テンプレート |
---|---|
アバター | avatar |
カード | card |
バッジ | badge |
ボタン | button |
チェックボックス | checkbox |
フォーム | form |
アイコン | icon |
アイコン ボタン | icon-button |
入力 | input |
ラジオ グループ | radio-group |
スイッチ | switch |
カレンダー | calendar |
リスト | list |
ナビゲーション バー | navbar |
リップル | ripple |
円チャート | pie-chart |
ドック マネージャ | dock-manager |
アプリをビルドして実行する
Ignite UI for Web Components アプリをビルドして実行するには、ig build コマンドと ig run コマンドを呼び出します。
ig build
ig run
Ignite UI CLI コマンド
使用可能な Ignite UI CLI コマンドとその使用方法 (フラグを渡すなど) の完全なリストは、Ignite UI CLI wiki ページにあります。
コマンド | エイリアス | 説明 |
---|---|---|
ig start | アプリケーションをビルドしてウェブ サーバーを開始、次にアプリケーションをデフォルト ブラウザーで開きます。 | |
ig build | アプリケーションをアプトプット ディレクトリへビルドします。 | |
ig generate | g | サポートされるフレームワークおよびプロジェクト タイプのための新しいカスタム テンプレートを生成します。 |
ig help | -h | 使用可能なコマンドをリストして手順の簡単な説明を示します。 |
ig config | Ignite UI CLI 構成設定の読み取り / 書き込み操作を実行します。 | |
ig doc | 検索した用語についてインフラジスティックスのサポート情報を検索します。 | |
ig list | l | 指定したフレームワークとタイプのすべてのテンプレートをリストします。プロジェクト フォルダー内でコマンド実行時にプロジェクトのフレームワークとタイプのテンプレートをすべてリストします。 |
ig test | 現在のプロジェクトのテストを実行します。 | |
ig version | -v | ローカル (ローカルがない場合はグローバル) にインストールされた Ignite UI CLI バージョンを示します。 |