Conceito

Integração entre Ionic e Vue.js, permitindo desenvolvimento de aplicativos híbridos e web com design Ionic e versatilidade Vue.js.

Instalação:

Pré-requisito possuir Node.js

1. Ionic CLI: npm install -g @ionic/cli
2. Criar projeto: ionic start nomeProjeto blank --type=vue
   • nomeProjeto: pasta do projeto;
   • blank: template inicial vazio (pode substituir por tabs para usar layout abas);
   • --type=vue: projeto com Vue.js.
3. Acessar projeto: cd nomeProjeto
4. Instalar Axios: npm install axios
5. Executar projeto: ionic serve
   • Acesso do projeto local: http://localhost:8100
6. Construir para mobile:
   • Instalar Capacitor: npm install @capacitor/core @capacitor/cli
   • Adicionar plataforma:
     • Android: ionic capacitor add android
     • iOS: ionic capacitor add ios
   • Executar aplicativo em dispositivo ou emulador:
     • Android: ionic capacitor run android
     • iOS: ionic capacitor run ios

Estrutura:

Projeto Ionic Vue possui seguinte estrutura de diretórios.

• nomeProjeto/: pasta do projeto Ionic
  • node_modules/: pacotes instalados via npm
  • public/: arquivos estáticos acessíveis ao público
  • src/: código fonte principal do aplicativo
    • assets/: mídias do aplicativo
    • components/: componentes Vue.js
      • ExemploComponent.vue: exemplo de componente Vue.js
    • services/: serviços do aplicativo
      • projetoService.ts: exemplo de service
    • router/: configuração de rotas do Vue Router
      • index.ts: arquivo principal de rotas
    • views/: páginas principais do aplicativo
      • Home.vue: página inicial padrão
    • App.vue: componente raíz/root do aplicativo
    • main.ts: ponto de entrada do aplicativo
    • theme/variables.css: CSS global
  • tests/: diretório para testes do aplicativo
    • 2e2/: diretório de arquivos para testes end-to-end (E2E)
    • unit/: diretório de arquivos para testes unitários
      • nomeTeste.spec.ts: exemplo de arquivo de teste unitário
  • package.json: configuração do projeto e dependências
  • tsconfig.json: configuração do TypeScript
  • ionic.config.json: configurações do projeto Ionic
  • .gitignore: arquivos e pastas ignorados pelo Git

---

Ionic Vue consumir API REST:

Consumir API REST Django com funções de CRUDL sobre músicas, disponível no GitHub.

API REST Django:

1. Baixar API REST Django do GitHub
2. Entrar na pasta da API REST (musicApiRest) e executar os comandos:

   
   python3 manage.py makemigrations
   python3 manage.py migrate
   python3 manage.py runserver
   

3. Rotas de acesso:

   
   Listar musics: (GET) http://localhost:8000/api/musics/
   Adicionar music: (POST) http://localhost:8000/api/musics/ (json) { "title": "Nome da música", "artist": "Nome do artista" }
   Ver music 1: (GET) http://localhost:8000/api/musics/1/
   Atualizar music 1: (PUT) http://localhost:8000/api/musics/1/ (json) { "title": "Nome da música", "artist": "Nome do artista" }
   Deletar music 1: (DELETE) http://localhost:8000/api/musics/1/
   

Ionic Vue:

1. Instalar Ionic CLI: npm install -g @ionic/cli
2. Criar projeto: ionic start ionic-vue-music-api blank --type=vue --framework=vue --capacitor --typescript
3. Acessar pasta projeto: cd ionic-vue-music-api
4. Instalar Axios: npm install axios
5. src/services/musicService.ts:

   
   Código aqui...
   

6. src/components/MusicList.vue:

   
   Código aqui...
   

7. src/components/MusicDetails.vue:

   
   Código aqui...
   

8. src/components/AddMusic.vue:

   
   Código aqui...
   

9. src/components/EditMusic.vue:

   
   Código aqui...
   

10. src/router/index.ts:

    
    Código aqui...
    

11. src/main.ts:

    
    Código aqui...
    

12. .env:

    
    Código aqui...
    

13. Testar aplicativo: ionic serve