The scaffolding provided by Superapp allows you to directly compile and develop WindVane miniapps. The scaffolding for miniapps helps you better understand the code structure of miniapps and quickly start developing your miniapps. This topic describes how to use the scaffolding for WindVane miniapps in Visual Studio Code.
Prerequisites
The latest versions of Visual Studio Code and Node are downloaded and installed.
Initialize the scaffolding
Click the
icon in the sidebar of Visual Studio Code, and then click Create Miniapp in the current window. A template selection page appears. 
Select a template for creating a miniapp on the page. The Visual Studio Code extension for WindVane provides seven built-in templates, including six templates that use mainstream frameworks such as React, Vue, and Angular, and a template that does not use any framework.
After you select a template, the file save dialog box of the system appears. The following figure shows the dialog box in the macOS system. In the dialog box, specify an app name, select the storage directory, and then click Create to initialize the scaffolding project.
After the initialization is complete, the Visual Studio Code extension for WindVane automatically opens the scaffolding project.
Run the
npm installcommand to add project dependencies. The following figure shows the project directory after the project dependencies are added.
publiccontains public resources of the project.scriptscontains the build scripts.srccontains source files of the project. It consists of the following subdirectories and files:assets: stores images such as the logo file.
components: stores component files.
index.js: the entry file for the project.
package.jsonis the configuration file of the project.node_modulescontains the project dependency modules loaded by the npm command.distis generated after the project is packaged by running thenpm run buildcommand.
Integrate JavaScript APIs
The Visual Studio Code extension for WindVane allows you to quickly integrate JavaScript APIs based on code hinting (IntelliSense). For more information about JavaScript APIs, see JavaScript APIs.
In the Visual Studio Code extension for WindVane, IntelliSense is available for code related to WindVane JavaScript APIs. If you enter WV in a .js or .ts file, the relevant APIs are displayed.
After you select a JavaScript API, the relevant code snippet is directly inserted to integrate the API.
