SuperApp:Use o modelo de projeto Miniapp

Pré-requisitos

Antes de começar, instale as versões mais recentes das seguintes ferramentas:

• Visual Studio Code

• Node.js

Inicialize o modelo de projeto

1. Na barra lateral do Visual Studio Code, clique em SuperApp Miniapp Develop Tool .

2. Clique em Create Miniapp. A página de seleção de modelo será exibida.

   1. Selecione um modelo conforme os requisitos do seu projeto. A extensão inclui sete modelos integrados: duas variantes para cada um dos três principais frameworks frontend (React, Vue e Angular), cada uma voltada para um caso de uso diferente, além de um modelo agnóstico a frameworks para desenvolvimento independente, sem dependência de nenhum framework.

      

3. Após selecionar um modelo, a caixa de diálogo para salvar o arquivo será aberta (conforme mostrado abaixo para macOS).

   1. Insira um nome para o aplicativo e selecione o diretório de armazenamento do projeto.

   2. Clique em Create para inicializar o projeto.

   Após a conclusão da inicialização, a extensão abre automaticamente o projeto gerado.

Instale as dependências do projeto

1. No diretório raiz do projeto, execute npm install para instalar as dependências:

1. Após a instalação, o diretório do projeto conterá os seguintes itens:

   • public: ativos estáticos servidos diretamente sem empacotamento, como ícones ou arquivos de manifesto.

   • scripts: scripts de build que controlam a compilação e o empacotamento do projeto.

   • src: árvore principal de source, contendo:

     • assets: imagens e outros recursos estáticos, incluindo o logotipo do aplicativo.

     • components: componentes de UI reutilizáveis compartilhados entre páginas.

     • index.js: ponto de entrada que inicializa o miniapp.

   • package.json: metadados do projeto e declarações de dependências.

   • node_modules: módulos de dependência baixados pelo npm. Não edite este diretório manualmente.

   • dist: saída de build de produção, gerada ao executar npm run build.

Integre APIs JavaScript

A extensão WindVane fornece IntelliSense para as APIs JavaScript do WindVane. Digite WV em qualquer arquivo .js ou .ts para ver uma lista de APIs correspondentes. Selecione uma API para inserir o snippet de código diretamente no projeto.