Como Integrar Django 3 Con Vue 3 y No Morir en El Intento - CodigoJS
Como Integrar Django 3 Con Vue 3 y No Morir en El Intento - CodigoJS
Categorías
JavaScript
SEO Linux
GitHub
Quasar
Wordpress
Como integrar Django 3 con Django
Vue 3 y no morir en el intento
Mar 01 Dic 2020 | Por: Roylan Suarez
1 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
$ mkdir django-vue
$ cd django-vue
Después lo activamos
$ source venv/bin/activate
2 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
versión
$ cd djvue
Instalar django-webpack-loader
El siguiente paso, es instalar django-webpack-loader el cual
inyecta en nuestras plantillas html de Django los js y css
generados por Vue3. Para entendenrlo un poco mejor, esta
app actúa como intermediario entre Django y Vue.
3 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
import os
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'webpack_loader',
]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.dj
'DIRS': [os.path.join(BASE_DIR, 'templa
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_proces
'django.template.context_proces
'django.contrib.auth.context_pr
'django.contrib.messages.contex
4 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
],
},
},
]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'public/st
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'public/med
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'public/static_dev/'
os.path.join(BASE_DIR, "ui/dist"), # Bundle
)
# Directorio de Vue
UI_DIR = os.path.join(BASE_DIR, 'ui/')
# Opciones de webpack-loader
WEBPACK_LOADER = {
'DEFAULT': {
'CACHE': not DEBUG,
'BUNDLE_DIR_NAME': 'webpack_bundles/',
'STATS_FILE': os.path.join(UI_DIR, 'web
'POLL_INTERVAL': 0.1,
'TIMEOUT': None,
'IGNORE': [r'.+\.hot-update.js', r'.+\.
'LOADER_CLASS': 'webpack_loader.loader.
5 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
}
}
Instalación de Vue3
Lo primero que debemos comprobar es si tenemos node
instalado, nos vamos a la consola y ejecutamos el siguiente
comando:
$ node -v
v12.20.0
6 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
$ vue create ui
$ cd ui
7 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
Configurar Vue3
Necesitamos establecer algunas configuraciones antes de
continuar. Lo primero es instalar el paquete de node
webpack-bundle-tracker, que hará un seguimiento de los
archivos estáticos generados por Vue en el archivo webpack-
stats.json, el cual añadimos anteriormente en la
configuración de Django. Dicho esto lo instalamos desde la
terminal.
// Importamos webpack-bundle-tracker
const BundleTracker = require("webpack-bundle-t
8 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
module.exports = {
// La ruta donde estará disponible el bundl
publicPath: "http://0.0.0.0:8080/",
// Directorio donde se creará el bundle de
outputDir: './dist/',
// Estable que se compile en tiempo de ejec
runtimeCompiler: true,
},
config
.plugin('BundleTracker')
// El archivo que mapeará los estáticos
.use(BundleTracker, [{filename:
config.resolve.alias
.set('__STATIC__', 'static')
config.devServer
.public('http://0.0.0.0:8080')
.host('0.0.0.0')
.port(8080)
.hotOnly(true)
.watchOptions({poll: 1000})
.https(false)
.headers({"Access-Control-Allow
}
};
9 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'webpack_loader',
'index.apps.IndexConfig',
]
def index(request):
context = {}
10 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
<title>Integrar Django 3 y Vue 3</title>
</head>
<body>
<h1 style="text-align: center;">Como integr
</body>
</html>
11 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
def index(request):
context = {}
urlpatterns = [
path('', views.index, name='index'),
]
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('index.urls')),
]
12 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
{% render_bundle 'main' %}
</body>
</html>
...
// Los puntos de entrada de nuestra aplicación.
pages: {
main: {
// entry for the page
entry: 'src/main.js',
},
},
...
<!DOCTYPE html>
<html lang="en">
<head>
13 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
<meta charset="UTF-8">
<meta name="viewport" content="width=device
<title>Integrar Django 3 y Vue 3</title>
</head>
<body>
<h1 style="text-align: center;">Como integr
14 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
<template>
<div style="color: red;">Este el primer compo
</template>
<script>
export default {
name: 'HelloDjango',
}
</script>
<style scoped>
</style>
15 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
...
<div id="app" style="text-align: center;">
[[ msg ]]
<hello-django/>
</div>
...
...
Conclusiones
Hemos visto como integrar Django3 y Vue3 para hacer una
web amigable para el SEO y totalmente dinámica utilizando
las tecnologías actualizadas.
Agradecimientos
16 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
Déjanos un comentario
Nombre
Correo electrónico
Comentario
Enviar
17 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
7 Comentarios
18 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
19 de 20 4/10/2022, 7:37 a. m.
Como integrar Django 3 con Vue 3 y no morir en el intento - CodigoJS https://www.codigojs.com/django-framework/integrar-django-3-con-v...
'/opt/anaconda3/envs/app-tidart/lib/python36.zip',
'/opt/anaconda3/envs/app-tidart/lib/python3.6',
'/opt/anaconda3/envs/app-tidart/lib/python3.6/lib-dynload',
CodigoJS by CodigoJS 2020
'/opt/anaconda3/envs/app-tidart/lib/python3.6/site-packages',
'/opt/anaconda3/envs/app-tidart/lib/python3.6/site-packages
Aviso legal Privacidad Política de cookies Contacto
/pycrypto-2.6.1-py3.6-macosx-10.7-x86_64.egg',
'/Applications/PyCharm.app/Contents/plugins/python/helpers
/pycharm_matplotlib_backend']
Server time: Tue, 18 May 2021 16:01:20 +0000
20 de 20 4/10/2022, 7:37 a. m.