Trabajando con Django y Vuejs - Comandos de instalación

Trabajando con Django y Vuejs - Comandos de instalación

Veamos algunos comandos básico y necesarios para la instalación de Django y Vuejs

Esta sera una guia de comandos necesarios para realizar la instalación de Django y Vue.js, como parte de un curso que engloba el trabajo entre estos dos Framework. Primero comencemos con Windows 10 y luego pasaremos a Linux Ubuntu. 

NOTA: antes de comenzar, tenga en cuenta que si hay un texto en codigo que este entre comillas " " , este texto se de remplazar y no tener en cuenta las comillas.  

Django y Vue.js en Windows 10

Antes de comenzar a trabajar con Django 2.x será necesario instalar python 3 en el sistema operativo, ya que en este caso el sistema operativo es windows la instalación es simple: Descargar Python 3 de 64 bit e instalar en el sistema operativo, lo unico a tener en cuenta en esta instalación es que en el asistente de instalación seleccionamos la casilla de incluir path automáticamente.

Bien ahora que tenemos instalado Python 3 debemos crear un entorno virtual, Entorno donde instalaremos todos los paquetes necesarios de python para trabajar con Django, aunque a su vez Django también es un paquete de Python.  Para esta tarea utilizaremos el siguiente comando en la consola de windows, OJO al crear un entorno virtual se creará una carpeta a la que accederás con frecuencia, antes de ejecutar el comando, procura con la terminal de comandos a una ruta accesible fácilmente para ti, luego ejecuta el siguiente comando:

python3 -m venv “nombre_entorno”

# si salta error de python3 no es reconocido el comando seria:

python -m venv “nombre_entorno”

Con el comando anterior habremos creado un entorno virtual, ahora para comenzar a instalar paquetes de python en este entorno debemos activar el entorno, para ello en Windows iremos a la ruta del entorno creado (al crear el entorno se creo una carpeta, debemos ir a esa carpeta para activar el entorno) 

cd /.../ruta_entorno/myentorno 

Una vez dentro del entorno o de la carpeta que se creó al crear el entorno virtual, nos dirigimos a la sub carpeta “Scrips”, ahora que estamos dentro de la carpeta bin, escribimos el siguiente comando en la consola.

#$ activate

Al haber ejecutado el comando “activate” al inicio de la línea de comandos de la terminal debió aparecer entre paréntesis el nombre del entorno, esto indica que tenemos correctamente activado el entorno.

 

Ahora para comenzar a instalar paquetes de python en este entorno, solo debemos ejecutar el siguiente comando:

pip install “nombre_paquete”

Entonces ahora con ese comando instalamos Django

pip install django

Con ello comenzará la instalación de Django, una vez terminado, si deseas instalar otro paquete por ejemplo Unipath que es un paquete necesario para el fácil acceso de rutas entre carpetas, y que es necesario para la configuración del proyecto según el curso Django y Vuejs, debemos ejecutar el siguiente comando:

pip install unipath 

 

¿Que comandos más son necesarios para el proyecto en Django?

Pillow: paquete que ayuda manejar el almacenamiento y rutas de imágenes

pyscopg2: paquete que ayuda  a la conexión de la ORM de Django con Postgresql

django-model-utils: paquete que ayuda a que las tablas de la base de datos tengan por defecto fecha de creación, fecha de modificación.

django-rest-framework: paquete que nos ayuda a crear servicios rest con django

django-cors-headers: paquete que nos ayuda a permitir conexiones de dominio cruzado. 

Instalar todos estos paquetes es similar a como instalamos los dos primeros paquetes.

 

Ahora que tenemos el entorno con todos los paquetes necesarios ya instalados, ahora creemos un proyecto Django, con el siguiente comando:

django-admin startproject “Nombre_Proyecto”

 

Ahora cumpliendo el curso de Django y Vuejs el siguiente comando sería el que nos permite crear aplicaciones de Django:

django-admin startapp “nombre de la app”

Si deseamos ejecutar el proyecto Django, debemos ir en la terminal con el entorno activo a la carpeta del proyecto y ubicarnos a la altura del archivo manage.py una vez ahi ejectar:

python manage.py runserver

Si deseamos migrar los cambios de nuestros models a la base de datos, debemos ejecutar los siguientes comandos:

python manage.py makemigrations

python manage.py migrate

Recuerda que estos comandos que utilizan el manage.py siempre los ejecutaremos, ubicados en la terminal a la altura del archivo manage.py

 

Ahora una vez que tenemos la migración ya ejecutadas, puede surgir la necesidad de utilizar un usuario, para crear un usuario el comando es:

python manage.py createsuperuser

Con estos comandos básicos podemos ya comenzar a trabajar en nuestro proyecto Django.

 

Ahora veamos los comandos necesarios para la creación de nuestra base de datos en Postgresql

Primero lógicamente necesitamos instalar Postgresql, y al momento de instalar tener cuidado al colocar la contraseña que pide, ya que utilizaremos mucho esa contraseña.

Para crear la base de datos, debemos ingresar a SQL shell de postgres, que se instala siempre junto a postgresql una vez dentro le daremos solamente [ENTER] hasta el momento donde nos solicita contraseña, ahi sera necesario que ingreses la contraseña que pusiste al instalar Postgresql

una vez ahi, para crear una base de datos ejecutaremos el siguiente comando:

CREATE DATABASE “nombre_bd”;

ahora que se ha creado la base de datos, necesitaremos un usuario que tenga permisos para acceder a esta base de datos, como indica el proyecto Django del curso. para crear un usuario en postgres ejecutaremos el siguiente comando en la misma SQL shell

CREATE USER “nombre_usuario”;

Ahora debemos acceder a la base de datos creada, para darle permisos de uso al usuario creado, para ello utilizaremos el siguiente comando: 

\c “nombre_base_datos”

ALTER ROLE “usuario_creado” WITH PASSWORD 'una_contraseña'; 

Hasta aquí ya tenemos configurado nuestro backend que alberga el proyecto Django y la Creación de la base de datos. 

 

Recuerda que ahora que ya tienes las bases de datos creado y el proyecto configurado, comenzaras a crear tus modelos en Django y para que estos modelos se reflejan en la base de datos creada, debes volver a ejecutar estos dos comandos:

python manage.py makemigrations

python manage.py migrate

 

Guia de instalacion de Vuejs En Windows.

la instalación de vuejs en Windows parte por instalar antes Node.js ya que utilizaremos el gestor de paquetes de Node.js para instalar paquetes javascript. por tanto instalemos primero Node.js en Windows. 

Ahora que se tiene instalado Node.js instalaremos vue.js, pero a partir de vue-cli, ingresa el siguiente comando en la terminal de windows. 

npm install -g @vue/cli

para verificar que la instalación es correcta, solo ingresa vue --version debería aparecer la versión de vue CLI como respuesta en la consola. 

Ahora en todo nuestro sistema ya esta configurado e instalado Vue.js, todo ello gracias a node.js, entonces ahora nos queda crear un proyecto con Vue.js con el siguiente comando:

vue create “nombre_proyecto”

Recuerda ejecutar este comando en la ruta donde quieres que se cree el proyecto.

Ahora para ejecutar el proyecto entra por la terminal de comandos a la nueva carpeta creada, con el comando anterior.

para ejecutar el proyecto tendrás que ingresar el siguiente comando por la terminal:

npm run serve

Ahora veamos algunos paquetes necesario para que nuestro proyecto esté bien configurado: 

Necesitaremos un paquete para trabajar bajo una base de css, por ello instalaremos foundation: 

npm install foundation-sites

Necesitaremos un paquete para compilar código css escrito en sass para ello instalaremos:

npm install -D sass-loader node-sass

Necesitaremos un paquete para conexión http con un servidor, por tanto instalaremos:

npm install --save axios vue-axios

Si deseas un paquete que te permita manejar fechas con facilidad puedes instalar: 

npm install vue-moment
 

Con estos comandos instalados ya tendrás una buena configuración en tu proyecto vue.js con el transcurso del tiempo se irá mejorando e incrementando cosas a esta guia.

Déjanos tu correo y entérate de mas de estos artículos: