SuperApp:ミニアプリの足場を使用する

前提条件

最新バージョンの Visual Studio Code と Node がダウンロードおよびインストールされています。

スキャフォールディングを初期化する

1. Visual Studio Code のサイドバーにある アイコンをクリックし、現在のウィンドウで [ミニアプリの作成] をクリックします。 テンプレート選択ページが表示されます。

   

2. ページでミニアプリを作成するためのテンプレートを選択します。 WindVane の Visual Studio Code 拡張機能は、React、Vue、Angular などの主要なフレームワークを使用する 6 つのテンプレートと、フレームワークを使用しない 1 つのテンプレートを含む、7 つの組み込みテンプレートを提供します。

   

3. テンプレートを選択すると、システムのファイル保存ダイアログ ボックスが表示されます。 次の図は、macOS システムのダイアログ ボックスを示しています。 ダイアログ ボックスで、アプリ名を指定し、保存ディレクトリを選択して、[作成] をクリックして、足場プロジェクトを初期化します。

   

   初期化が完了すると、WindVane の Visual Studio Code 拡張機能によって足場プロジェクトが自動的に開かれます。

   npm install コマンドを実行して、プロジェクトの依存関係を追加します。 次の図は、プロジェクトの依存関係が追加された後のプロジェクト ディレクトリを示しています。

   

   • public には、プロジェクトのパブリック リソースが含まれています。

   • scripts には、ビルド スクリプトが含まれています。

   • src には、プロジェクトのソース ファイルが含まれています。 これは、次のサブディレクトリとファイルで構成されています。

     • assets：ロゴ ファイルなどの画像を保存します。

     • components：コンポーネント ファイルを保存します。

     • index.js：プロジェクトのエントリ ファイルです。

   • package.json は、プロジェクトの構成ファイルです。

   • node_modules には、npm コマンドによってロードされたプロジェクトの依存関係モジュールが含まれています。

   • dist は、npm run build コマンドを実行してプロジェクトをパッケージ化した後に生成されます。

JavaScript API を統合する

1. WindVane の Visual Studio Code 拡張機能では、WindVane JavaScript API に関連するコードに対して IntelliSense を使用できます。 .js ファイルまたは .ts ファイルに WV と入力すると、関連する API が表示されます。

2. JavaScript API を選択すると、関連するコード スニペットが直接挿入され、API が統合されます。