Creando nuestro proyecto
Este curso es una continuación del Proyecto API de pelis con DRF, en el que utilizando un framework JavaScript llamado Nuxt.js (basado en Vue.js), os enseñaré a crear un cliente web SPA.
El cliente nos ofrecerá tanto formularios de registro como de identificación y contará con dos páginas, una para visualizar el top de películas y realizar búsquedas, y otra para gestionar sus películas favoritas, ya que éstas se podrán marcar o desmarcar fácilmente y gestionarse en la propia sección.
Por si fuera poco añadiremos también unas alertas toast asíncronas que quedan geniales.
Dicho lo cual, teniendo Node.js instalado, desde la terminal ejecutamos:
npx create-nuxt-app cli_peliculas
Tendremos que elegir las siguientes opciones:
- Project name: Enter
- Project description: Enter
- Author name: Enter
- Package manager: npm
- UI Framework: Buefy
- Custom server framework: none
- Nuxt.js modules: Axios
- Linting tools: Enter
- Test framework: Enter
- Rendering mode: SPA
Esto nos creará una SPA básica usando Nuxt.js y la UI de Buefy automáticamente, vamos a echarle un vistazo:
cd .\cli_pelis\
npm run dev
Si accedemos a la url http://localhost:3000 podréis ver que la SPA ya cuenta con dos páginas y un diseño adaptativo basado en Bulma pero utilizando Buefy como librería de componentes para Vue.
Podríamos borrar lo que hay y construir nuestro cliente desde cero, pero he pensado que es mejor adaptar lo que tenemos, así nos centramos en lo importante.