➜ Vincular Vue.js y Axios en una página web

En la primera lección solo debemos integrar las librerías de Vue.js y Axios.js en el head de nuestra página web o documento html. Trataremos de responder las siguiente preguntas que cualquiera que empieza, se haria:

1. ¿Cómo integrar Vue.js en una página web?
2. ¿Cómo integrar Axios.js en una página web?
3. ¿Cómo se que se ha cargado correctamente la librería Vue.js o Axios.js?

Existen dos formar de integrar varias formas, maneras y matices de integrar librerías en una aplicación web. En esta ocasión  usaremos la forma más sencilla, la cual consiste en tomar las url del repositorio de JS o el CDN. El código es el siguiente:

CÓDIGO PARA INTEGRAR VUE.JS Y AXIOS.JS

<!DOCTYPE html>
<html>
<head>
	<title>Integrando VUE.JS Y AXIOS</title>
	<meta charset="UTF-8">		
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
</head>
<body>
</body>
</html>

VERIFICAR LA CARGA CORRECTA DE LAS LIBRERÍAS

Ahora vamos a verificar si al menos carga correctamente vue.js con el código de ejemplo que tiene en su plataforma oficial.

Agregamos una capa div con el id #app y dentro una etiqueta párrafo todo ello dentro  del tag body quedando asi

<div id="app">
  <p>Hola {{mensaje}}</p>
</div>

Creamos un script al final del párrafo agregado

const app= Vue.createApp({
    data() {
        return{
            message : "Hola Vue México!!!!",         
        }
    },}).mount("#app")

Si todo funciona correctamente nos debe mostrar el mensaje  "Hola México VueJS, La blanca ciudad". Con esto estamos verificando que se ha cargado Vue.js correctamente y tenemos todas las funcionalidades para el desarrollo de nuestro aplicación web.