Este repositiorio contiene el código fuente que sirvió de ejemplo en la charla sobre Vue y Django que di en el meetup de Vue.js el 12/Sep/2017.
Las etiquetas step1 hasta step6 marcan los distintos pasos:
step1: aplicación Django vacía tal y como se crea con el asistente de nuevo proyecto de PyCharm (equivalente adjango-admin startproject gif_catalog)step2: aplicación clásica de Django, sirviendo la vista de '/' mediante una plantilla de Django. No se usa Javascriptstep3: instalado webpack-bundle-tracker (plugin de webpack) y django-webpack-loader (módulo de Django). Configurado webpack y Django para que funcionen conjuntamente.step4: una API sencilla para servir JSON desde Django y consumirla desde la app de Vue.jsstep5: autenticación por sesiones de Djangostep6: rutas (página de detalle)
Recomiendo primero hacer checkout de master, instalar las dependencias, etc y luego ir revisando el ejemplo paso por paso
Para ejecutar la parte de Django:
- crear un entorno virtual (
mkvirtualenv gif_catalog) - instalar las dependencias (
cd gif_catalog; pip install -r requirements.txt) - ejecutar las migraciones de bbdd (
python manage.py migrate) - crear un usuario (
python manage.py createsuperuser) - arrancar django (
python manage.py runserver) - añadir datos de prueba usando la consola de administración
Para ejecutar la parte de Vue/webpack:
- instalar las dependencias (
cd frontend; npm install) - levantar el servidor de desarrollo de webpack (
npm run dev)
La presentación se puede encontrar en slideshare