Ejemplo Vue.js: Rick and Morty

Ejemplo de sitio en Vue.js, utilizando la API pública de Rick and Morty.

Tabla de contenidos

• API Rick and Morty
• Proyecto
  • Clonar proyecto con Git
  • Estructura de directorios
  • Detalles de desarrollo
  • Scripts de NPM
  • Dependencias externas utilizadas
    • Dependencias de desarrollo
    • Dependencias del proyecto

API Rick and Morty

Para el desarrollo de este ejemplo, se usó la API pública de Rick and Morty. Se puede visitar su documentación para mas detalles.

Proyecto

Clonar proyecto con Git

Para clonar el proyecto:

git clone https://github.com/sebaignacioo/vue-rickandmorty-example.git

Estructura de directorios

.
├── ./.vscode/
├── ./node_modules/
├── ./public/
├── ./src/
│   ├── ./src/components/
│   │   ├── ./src/components/card/
│   │   │   ├── ./src/components/card/CardDetails.vue
│   │   │   ├── ./src/components/card/CardGender.vue
│   │   │   └── ./src/components/card/TheCard.vue
│   │   ├── ./src/components/navbar/
│   │   │   ├── ./src/components/navbar/NavbarLink.vue
│   │   │   ├── ./src/components/navbar/NavbarToggle.vue
│   │   │   └── ./src/components/navbar/TheNavbar.vue
│   │   └── ./src/components/TheButton.vue
│   ├── ./src/layouts/
│   │   └── ./src/layouts/MainLayout.vue
│   ├── ./src/router/
│   │   └── ./src/router/index.ts
│   ├── ./src/styles/
│   │   ├── ./src/styles/_variales.scss
│   │   └── ./src/styles/main.scss
│   ├── ./src/views/
│   │   ├── ./src/views/AboutView.vue
│   │   ├── ./src/views/EpisodiosView.vue
│   │   └── ./src/views/HomeView.vue
│   ├── ./src/App.vue
│   ├── ./src/main.ts
│   └── ./src/shims-vue.d.ts
├── ./tests/
│   └── ./tests/unit/
│       └── ./tests/unit/example.spec.ts
├── ./.browserslistrc
├── ./.eslintrc.js
├── ./.gitignore
├── ./.npmrc
├── ./.nvmrc
├── ./jest.config.js
├── ./package.json
├── ./pnpm-lock.yaml
├── ./README.md
└── ./tsconfig.json

Detalles de desarrollo

IDEs
Lenguajes y entornos
Estilos
Utilidades

Scripts de NPM

Script	Descripción
pnpm serve	Ejecuta el entorno de desarrollo.
pnpm build	Construye la aplicación, para su posterior despliegue.
pnpm test:unit	Ejecuta las pruebas unitarias (si las hubiese) con Jest.
pnpm lint	Linter de la app, para mejorar y estandarizar la sintáxis de programación.

Dependencias externas utilizadas

Dependencias de desarrollo

Paquete	Descripción
vite	Herramientas de desarrollo frontend. Reemplazo de Webpack.
sass	Preprocesador de CSS
@vitejs/plugin-react	Plugin de Vite para soportar React
@types/react	Tipos para la librería React
@types/react-dom	Tipos para la librería ReactDOM

Dependencias del proyecto

Paquete	Descripción
vue	Librería de JavaScript que permite crear interfaces de usuario.
vue-class-component	Permite la interacción entre la librería de React, y el DOM en desarrollo web.
vue-router	Librería que permite generar enrutamiento en la aplicación de React.
@popperjs/core	Librería con utilidades para mostrar mensajes y avisos.
bootstrap	Librería de estilos, muy conocida y con gran cantidad de documentación y ejemplos.
oh-vue-icons	Librería que permite incorporar una gran cantidad de librerías de íconos con licencia libre, como un componente de Vue.